【JS】チェックボックスでフォームの disabled を設定/解除するスクリプトをjQueryで組んでみた
2018/08/30
ラジオボタンでは作っていましたが、チェックボックスでフォームの disabled を制御するスクリプトを作成したので忘備録としてポストします。
checkbox + jQuery でフォームの disabled 制御
inputフォームに disabled を設定/解除
|
1 2 |
<input type="checkbox" name="sampleCheck" id="sampleCheck" value="1"> <input type="text" name="sample" id="sampleImput"> |
このフォームに disabled を設定する場合、jQuery では以下のようにします。
|
1 2 |
// disabledを付与 $("#sampleImput").attr("disabled", "disabled"); |
解除する場合は以下のようにします。
|
1 2 |
// disabledを解除 $("#sampleImput").removeAttr("disabled"); |
checkbox がチェックされているかを調査
checkbox がチェックされているかを調査するには、以下の(1)・(2)の方法があります。
(1) attr() を使う
|
1 |
(1)： val1 = $("#sampleCheck:checked").attr("checked"); |
(2) val() を使う
|
1 |
(2)： val2 = $("#sampleCheck:checked").val(); |
(1)の場合は、チェックボックスがチェックされていれば "checked" が返り、
(2)の場合は、要素に設定されている value値を返します。このサンプルの場合は「1」がval2 として返ります。
チェックされていない場合は、(1)・(2)とも「undefined」が返ります。
では本題。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<style> /* フォーム背景色(白) */ .bg_white{ background-color: #fff; } /* フォーム背景色(disabled) */ .bg_disabled{ background-color: #d2d1c6; } </style> <script> $(function(){ $("#sampleCheck").change(function(){ sampleCheckVal = $("#sampleCheck:checked").val(); if (sampleCheckVal == "1") { $("#sampleImput").removeAttr("disabled").removeClass("bg_disabled").addClass("bg_white"); } else { $("#sampleImput").attr("disabled", "disabled").removeClass("bg_white").addClass("bg_disabled"); } }).trigger("change"); }); </script> |
ここまでの HTML と CSS を書くと以下のようになります。
デモ
デモはこちらから。
https://lightning-bolt.xyz/js/jquery.tgCheckboxControllDisable/
ここで終わっても良いのですが、複数個並んでいる場合も考えてみました。
checkbox + jQuery で複数個のフォームの disabled 制御
複数個の inputフォームに disabled を設定/解除
以下の様に、4つ並んでいる場合の方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div> <input type="checkbox" name="sampleCheck1" id="sampleCheck1" value="1"> <input type="text" name="sample1" id="sampleImput1"> </div> <div> <input type="checkbox" name="sampleCheck2" id="sampleCheck2" value="1"> <input type="text" name="sample2" id="sampleImput2"> </div> <div> <input type="checkbox" name="sampleCheck3" id="sampleCheck3" value="1"> <input type="text" name="sample3" id="sampleImput3"> </div> <div> <input type="checkbox" name="sampleCheck4" id="sampleCheck4" value="1"> <input type="text" name="sample4" id="sampleImput4"> </div> |
配列とfor文を使うと便利です。
内容は殆ど変わっていませんが、for文と、変数名に連番を使っています。
変数名は #sampleImput"+cnt という風に、プラス記号を用いて文字連結します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(function(){ $("#sampleCheck1, #sampleCheck2, #sampleCheck3, #sampleCheck4").change(function(){ sampleCheckVal = new Array(); for (cnt=1; cnt<=4; cnt++) { sampleCheckVal[cnt] = $("#sampleCheck"+cnt+":checked").val(); if (sampleCheckVal[cnt] == "1") { $("#sampleImput"+cnt).removeAttr("disabled").removeClass("bg_disabled").addClass("bg_white"); } else { $("#sampleImput"+cnt).attr("disabled", "disabled").removeClass("bg_white").addClass("bg_disabled"); } } }).trigger("change"); }); </script> |
デモ
デモはこちらから
https://lightning-bolt.xyz/js/jquery.tgCheckboxControllDisable/
さらに、発展させてみます。
発展編
短いコードにする
for文と配列を使う形式でも問題無いといえば無いのですが、もうちょっと発展させてみたいと思います。
ラジオボタンとフォーム4つをさらに div で囲って ID を付ける形にします。（<div id="example3">）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="example3"> <div> <input type="checkbox" name="sampleCheck11" id="sampleCheck11" value="1"> <input type="text" name="sample11" id="sampleImput11"> </div> <div> <input type="checkbox" name="sampleCheck12" id="sampleCheck12" value="1"> <input type="text" name="sample12" id="sampleImput12"> </div> <div> <input type="checkbox" name="sampleCheck13" id="sampleCheck13" value="1"> <input type="text" name="sample13" id="sampleImput13"> </div> <div> <input type="checkbox" name="sampleCheck14" id="sampleCheck14" value="1"> <input type="text" name="sample14" id="sampleImput14"> </div> </div><!--//example3--> |
そして、スクリプトは以下のように。
|
1 2 3 4 5 6 7 8 9 |
<script> // サンプル3 $(function(){ $("#example3 input[type=checkbox]").change(function(){ $("input").next("input[type=text]").attr("disabled", "disabled").removeClass("bg_white").addClass("bg_disabled"); $(":checked").next("input[type=text]").removeAttr("disabled").removeClass("bg_disabled").addClass("bg_white"); }).trigger("change"); }); </script> |
かなり、短くなりました。
動作対象とするチェックボックスのセレクターを"#"から始まる固定のID名ではなく、より汎用的にinput[type=checkbox] で絞り込むように指定しているのがミソ。
divで囲んだのは限定的にセレクターを指定するためです。
次の"チェックしたら"・"外したら"の部分は、サンプル1及び2で使った if 文ではなく、セレクターを:checkedとし、「チェックされているチェックボックス」にアクセスするようにしています。これも汎用性がある書き方かと。
続きの .next("input[type=text]")で、「（チェックされていない）チェックボックスの次に来るinputフォームを」と「チェックされているチェックボックスの次に来るinputフォームを」という風に指定しています。
色々な書き方が出来るのも、jQueryの魅力でもありますね。
デモ
デモはこちらから