今回は、チェックボックスで「該当なし」をチェックしたときに、他の選択肢は選択できないよう、非表示にするプログラムをjQueryを使って作成します。 動作 最終的にこんな感じで動きます。 //codepen.io/creativeflake/pen/qrMMmx HTML HTMLは、シンプルなリスト構造で作成するとして、input type=”checkbox” には「name」属性、「value」属性を記述します。 ＊もちろん、リスト以外でもOKです。 ここでクラス名を”check_multi”というものと、「該当なし」の場合は”check_unique”とします。
|
1 2 3 4 5 6 7 |
<ul> <li><label><input type="checkbox" name="check_a" value="選択肢A" class="check_multi">選択肢A</label></li> <li><label><input type="checkbox" name="check_b" value="選択肢B" class="check_multi">選択肢B</label></li> <li><label><input type="checkbox" name="check_c" value="選択肢C" class="check_multi">選択肢C</label></li> <li><label><input type="checkbox" name="check_d" value="選択肢D" class="check_multi">選択肢D</label></li> <li><label><input type="checkbox" name="check_z" value="該当なし" class="check_unique">該当なし</label></li> </ul> |
CSS CSSの .disabled はjQueryによって追加されるクラス名になるのですが、非表示となった場合、透過度を40%になるということを、あらかじめ設定しておきます。
|
1 2 3 4 5 6 |
li { list-style-type: none; } .disabled { opacity: 0.4; } |
JavaScript 前提条件として、head内でjQueryを読み込みます。 JavaScript本体は次のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
$('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