【jQuery】チェックボックスで「該当なし」を選択肢たらその他を非表示

今回は、チェックボックスで「該当なし」をチェックしたときに、他の選択肢は選択できないよう、非表示にするプログラムをjQueryを使って作成します。

動作

最終的にこんな感じで動きます。
//codepen.io/creativeflake/pen/qrMMmx

HTML

HTMLは、シンプルなリスト構造で作成するとして、input type=”checkbox” には「name」属性、「value」属性を記述します。
＊もちろん、リスト以外でもOKです。

ここでクラス名を”check_multi”というものと、「該当なし」の場合は”check_unique”とします。

  
選択肢A
  
選択肢B
  
選択肢C
  
選択肢D
  
該当なし

CSS

CSSの .disabled はjQueryによって追加されるクラス名になるのですが、非表示となった場合、透過度を40%になるということを、あらかじめ設定しておきます。

li {
  list-style-type: none;
}
.disabled {
  opacity: 0.4;
}

JavaScript

前提条件として、head内でjQueryを読み込みます。

JavaScript本体は次のように記述します。

$('input').on('change', function(){
  if ($('.check_unique').is(':checked')) {
    $('.check_multi').prop('disabled', true);
    $('.check_multi').prop('checked', false);
    $('.check_multi').parent().addClass('disabled');
  }
  else {
    $('.check_multi').prop('disabled', false);
    $('.check_multi').parent().removeClass('disabled');
 }
});

JavaScriptの解説

1行目
inputタグが変更されたら（チェックのオン・オフ）があった場合、以下の関数を実行します。

2行目
クラス名”check_unique”がチェックされていたら

3行目
クラス名”check_multi”を非表示（disabledをオンにする）にし、

4行目
クラス名”check_multi”のチェックを外し（checkedをオフにする）にし、

5行目
クラス名”check_multi”の親要素にクラス名”disabled”を付け加えます。

7行目
それ以外（クラス名”check_unique”がチェックされていない）とき

8行目
クラス名”check_multi”を表示（disabledをオフにする）にし、

9行目
クラス名”check_multi”の親要素からクラス名”disabled”を外します。

動作

こちらから改めて動作を確認してみてください！
//codepen.io/creativeflake/pen/qrMMmx