【jQuery】ラジオボタンの選択内容に合わせて他の項目を変更する方法

まだjQueryを使う機会も多いので、今のうちに色々な事をメモしておこうと思います。

フォームを設置する場合、jQueryを使いラジオボタンの設定に連動して、他のフォーム部分を変更する方法のメモになります。

HTML

<h1>連絡方法</h1>
<label>
  <input type="radio" name="連絡方法" value="電話連絡" id="telSet" />電話連絡　
</label>
<label>
  <input type="radio" name="連絡方法" value="メール連絡" id="mailSet" />メール連絡
</label>
<h1>連絡可能時間</h1>
<select name="連絡可能時間" id="rtime">
  <option selected value="" selected class="tellist">選択してください</option>
  <option value="24時間" class="mail">24時間</option>
  <option value="" class="tel">連絡可能な時間を選択してください</option>
  <option value="9時～10時" class="tel">9時～10時</option>
  <option value="10時～11時" class="tel">10時～11時</option>
  <option value="11時～12時" class="tel">11時～12時</option>
  <option value="12時～13時" class="tel">12時～13時</option>
  <option value="13時～14時" class="tel">13時～14時</option>
  <option value="14時～15時" class="tel">14時～15時</option>
  <option value="16時～17時" class="tel">16時～17時</option>
  <option value="17時～18時" class="tel">17時～18時</option>
</select>

jQuery

$(function(){
  $('#mailSet').on('change',function() {
    if ($(this).is(':checked')) {
      $('.tel').css('display','none');
      $('.mail').css('display','inline');
      $("#rtime").val("24時間");
    }
  });
  $('#telSet').on('change',function() {
    if ($(this).is(':checked')) {
      $('.mail').css('display','none');
      $('.tel').css('display','inline');
      $("#rtime").val("");
    }
  });
});

思ったよりざっくりな作りになりましたが、ラジオボタンにチェックが入った時に、その下にあるセレクトボックスのオプション内容を変化させてみます。

連絡方法が「電話連絡」の場合は連絡可能時間のセレクトボックス内のclass="tel"が表示され、時間を選択するようになります。
「メール連絡」にした場合、class="tel"を消して、代わりにclass="mail"を表示させます。valueの値も設定しておきます。
valueの値を設定しておく理由としては、このセレクトボックスにバリデーションがかかっていた場合、セレクトボックスは選択された状態になっているのにエラーが出る為です。

この方法で必要な情報だけ表示させるようにすれば、長いフォーム入力も多少は入力しやすくなるのかなと思います。