【jQuery】ラジオボタン change()でイベント発動（サンプルコード付）

webフォームで、選択肢のうち「その他」が選択されたら、その詳細をテキストで入力してもらう、なんてことはよくあると思います。

その他が選ばれなくてもテキストフィールドを丸出ししておいても問題はないのですが、ユーザー目線で考えたら、回答内容に応じて、入力すべきなのかどうなのかを感覚的にわかるようにした方が優しいですよね。

jQueryを使えば、そのようなフォーム機能の実装は簡単に行えますので、ご案内いたします。

まずはデモ

今回やりたいことについて、デモ画面を用意しました。

「その他」を選択すると、テキストフィールド入力が有効になり、それ以外が選択されている場合は、無効になります。

※デモ画面は見やすくするためにbootstrapを使用しています。

デモ画面へ

コード解説

デモのサンプルコード

まずはhtml。

<div class="row content">
   <div class="col-sm-6 col-xs-12">
   <h2>海外旅行、どこに行きたい？</h2>
      <form>
         <div class="radio">
            <label>
               <input type="radio" name="optionsRadios" id="optionsRadios1" value="1"> ハワイ
            </label>
         </div>
         <div class="radio">
            <label>
               <input type="radio" name="optionsRadios" id="optionsRadios2" value="2"> グアム
            </label>
         </div>
         <div class="radio">
            <label>
               <input type="radio" name="optionsRadios" id="optionsRadios3" value="3"> 韓国
            </label>
         </div>
         <div class="radio">
            <label>
               <input type="radio" name="optionsRadios" id="optionsRadios4" value="4"> ロシア
            </label>
         </div>
         <div class="radio">
            <label>
               <input type="radio" name="optionsRadios" id="optionsRadios5" value="5"> その他
            </label>
         </div>
         <div class="form-group">
               <label for="other" class="other_label disabled">その他選択した方は、詳細記入ください。</label>
               <input type="text" class="form-control" id="inputother" placeholder="国または地域を記入" disabled="disabled">
         </div>

      </form>
   </div>
</div>

bootstrapを使用しているので、若干見づらいかもですが、radioで選択肢をいくつか用意し、そのうちの一つに「その他」を用意しています。
そして、「その他」の詳細記入欄は、デフォルトでは入力を無効にしたいので、「disabled=”disabled”」としています。

また、その上のlabelにはcssで「disabled」ってのを入れていますが、これは入力無効の場合にテキストの色を薄くするために、定義しているものです。

なので、別途下記のようなスタイルの指定が必要です。

.disabled {
    color:#dddddd;
}

つづいて、jQuery。

<script>
$(function(){
   $( 'input[name="optionsRadios"]:radio' ).change( function() {
      var radioval = $(this).val();
      if(radioval == 5){
         $('#inputother').removeAttr('disabled');
         $('.other_label').removeClass('disabled');
      }else{
         $('#inputother').attr('disabled','disabled'); 
         $('.other_label').addClass('disabled');
      }
   }); 
});
</script>

詳しくは事項で解説します。

ラジオボタンのイベント監視

さて、jQueryの詳細ですが、

まず

$( 'input[name="optionsRadios"]:radio' ).change( function() {

ここで、ラジオボタンのイベント監視をしています。

「input の　name=”optionsRadios(radio）が、changeしたら」

という内容ですね。

そのあとに、

 var radioval = $(this).val();

として、選択されたラジオボタンのvalueを変数（radioval）に入れています。
ラジオボタンの選択が変わるたびに、そのvalueがこの変数に入っていくわけです。

そして、

if(radioval == 5){

というif文を続けています。valueが「５」、つまり、「その他が選ばれている場合は・・・」ということです。

if文の中身は事項で説明します。

ラジオボタンの値に応じて、テキストフィールド入力可能、不可能に変更する

さて、if文の中身です。

      if(radioval == 5){
         $('#inputother').removeAttr('disabled');
         $('.other_label').removeClass('disabled');
      }else{

2行目の部分で、id=inputother の要素にある、「disabled」属性(Attr）を削除（remove）せよ、という指令を出してます。
その次の行では、class=other_label の要素にある、class=disabledをを削除（remove）せよ、という指令を出してます。

これで、input要素を無効化にしていた、disabled=”disabled”という属性　そして、labelにdisabledというclass名で指定していたスタイルを外したわけですね。

次に　else（つまり、「その他」以外の選択肢を選んだ場合）以下で、

      }else{
         $('#inputother').attr('disabled','disabled'); 
         $('.other_label').addClass('disabled');
      }

という形で、今度は逆に、属性およびclass名を付与し、再び無効化されるようにしているということになります。

うん、簡単簡単です！！この辺のjQueryはよく使うと思いますので、初心者の方はしっかりと押さえましょう。