jQueryでチェックボックスにチェックを入れて検索条件を有効にするようなフォームを良く見かけます。
例えば、「絞り込む」と言うチェックボックスがあり、チェックをいれて無効化されていたさらに細かい検索条件が有効化され、チェックをはずすと、検索条件が無効化されるといった類のフォームです。
まず$(セレクタ).prop(“disabled”,true);でラジオボタンを無効にします。
次にチェックボックスがクリックされた時の処理を記述しますが、単にpropで有効にしたり無効にしたりするだけです。
|
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> $(function(){ // 全てのラジオボタンを無効にする $(":radio").prop("disabled",true); $("#chk").click(function(){ if($("#chk").prop("checked")){ // ラジオボタンを有効にする $(":radio").prop("disabled",false); }else{ // ラジオボタンを無効にする $(":radio").prop("disabled",true); } }); }); </script> <style> .error{background-color:#FFCCCC;} .alert{color:#FF0000;font-size:small;} </style> <!-- コーディング部分 --> </head> <body> <form> 場所<br> <input type="checkbox" name="chuo" id="chuo">中央区 <input type="checkbox" name="nishi" id="nishi">西区 <input type="checkbox" name="naniwa" id="naniwa">浪速区 <br><br> <fieldset> <legend> <input type="checkbox" name="chk" id="chk">絞り込む </legend> 間取り<br> <input type="radio" name="madori" value="1r" checked>1R <input type="radio" name="madori" value="1k">1K <input type="radio" name="madori" value="1dk">1DK <input type="radio" name="madori" value="1ldk">1LDK </fieldset> <br><br> <input type="submit" value="登録"> </form> </body> </html> |
DEMOです。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
