【JS】チェックボックスでフォームの disabled を設定/解除するスクリプトをjQueryで組んでみた
2018/08/30
ラジオボタンでは作っていましたが、チェックボックスでフォームの disabled を制御するスクリプトを作成したので忘備録としてポストします。
checkbox + jQuery でフォームの disabled 制御
inputフォームに disabled を設定/解除
[html]
[/html]
このフォームに disabled を設定する場合、jQuery では以下のようにします。
[js]
// disabledを付与
$("#sampleImput").attr("disabled", "disabled");
[/js]
解除する場合は以下のようにします。
[js]
// disabledを解除
$("#sampleImput").removeAttr("disabled");
[/js]
checkbox がチェックされているかを調査
checkbox がチェックされているかを調査するには、以下の(1)・(2)の方法があります。
(1) attr() を使う
[js]
(1)： val1 = $("#sampleCheck:checked").attr("checked");
[/js]
(2) val() を使う
[js]
(2)： val2 = $("#sampleCheck:checked").val();
[/js]
(1)の場合は、チェックボックスがチェックされていれば "checked" が返り、
(2)の場合は、要素に設定されている value値を返します。このサンプルの場合は「1」がval2 として返ります。
チェックされていない場合は、(1)・(2)とも「undefined」が返ります。
では本題。
[js]
[/js]
ここまでの HTML と CSS を書くと以下のようになります。
デモ
デモはこちらから。
https://lightning-bolt.xyz/js/jquery.tgCheckboxControllDisable/
ここで終わっても良いのですが、複数個並んでいる場合も考えてみました。
checkbox + jQuery で複数個のフォームの disabled 制御
複数個の inputフォームに disabled を設定/解除
以下の様に、4つ並んでいる場合の方法。
[html]
[/html]
配列とfor文を使うと便利です。
内容は殆ど変わっていませんが、for文と、変数名に連番を使っています。
変数名は #sampleImput"+cnt という風に、プラス記号を用いて文字連結します。
[js]
[/js]
デモ
デモはこちらから
https://lightning-bolt.xyz/js/jquery.tgCheckboxControllDisable/
さらに、発展させてみます。
発展編
短いコードにする
for文と配列を使う形式でも問題無いといえば無いのですが、もうちょっと発展させてみたいと思います。
ラジオボタンとフォーム4つをさらに div で囲って ID を付ける形にします。（<div id="example3">）
[html]
[/html]
そして、スクリプトは以下のように。
[js]
[/js]
かなり、短くなりました。
動作対象とするチェックボックスのセレクターを"#"から始まる固定のID名ではなく、より汎用的にinput[type=checkbox] で絞り込むように指定しているのがミソ。
divで囲んだのは限定的にセレクターを指定するためです。
次の"チェックしたら"・"外したら"の部分は、サンプル1及び2で使った if 文ではなく、セレクターを:checkedとし、「チェックされているチェックボックス」にアクセスするようにしています。これも汎用性がある書き方かと。
続きの .next("input[type=text]")で、「（チェックされていない）チェックボックスの次に来るinputフォームを」と「チェックされているチェックボックスの次に来るinputフォームを」という風に指定しています。
色々な書き方が出来るのも、jQueryの魅力でもありますね。
デモ
デモはこちらから