今回は、チェックボックスで「該当なし」をチェックしたときに、他の選択肢は選択できないよう、非表示にするプログラムをjQueryを使って作成します。
Contents
動作
最終的にこんな感じで動きます。
//codepen.io/creativeflake/pen/qrMMmx
HTML
HTMLは、シンプルなリスト構造で作成するとして、input type=”checkbox” には「name」属性、「value」属性を記述します。
＊もちろん、リスト以外でもOKです。
ここでクラス名を”check_multi”というものと、「該当なし」の場合は”check_unique”とします。
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
