2017年3月

JavaScript

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

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

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

JavaScript 前提条件として、head内でjQueryを読み込みます。 JavaScript本体は次のように記述します。

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