フォームで、必須項目が埋まり、ラジオボタンやチェックボックスが最低1つチェックされている場合にのみ送信ボタンを押せるようにしたいです。
(下記サンプルは必須項目のみにしてあります)
下記のように作ってみたのですが、ラジオボタンやチェックボックスの挙動おかしく、チェックを一つ入れた時のみ正常に動作し、それ以外では押せるようになりませんでした。
環境はHTML5でjQuery2.2.4で試しています。
不慣れで申し訳ありませんが、うまく動く方法をご教示いだけないでしょうか。
HTML
1<form> 2<dl> 3 <dt>項目1</dt> 4 <dd><input type="text" name="name1" id="name1" required></dd> 5 <dt>項目2</dt> 6 <dd><input type="text" name="name2" id="name2" required></dd> 7 <dt>ラジオボタン</dt> 8 <dd> 9 <input type="radio" name="group_radio[]" id="radio1" value="項目1" required> 10 <label for="radio1" class="address_condo">項目1</label> 11 <input type="radio" name="group_address[]" id="radio2" value="項目2" required> 12 <label for="radio2" class="address_house">項目2</label> 13 <input type="radio" name="group_address[]" id="radio3" value="項目3" required> 14 <label for="radio3" class="address_land">項目3</label> 15 </dd> 16 <dt>チェックボックス</dt> 17 <dd> 18 <div class="rq_group"> 19 <input type="checkbox" name="group_check[]" id="check1" value="項目1" required> 20 <label for="check1" class="address_condo">項目1</label> 21 <input type="checkbox" name="group_check[]" id="check2" value="項目2" required> 22 <label for="check2" class="address_house">項目2</label> 23 <input type="checkbox" name="group_check[]" id="check3" value="項目3" required> 24 <label for="check3" class="address_land">項目3</label> 25 </div> 26 </dd> 27</dl> 28<input type="submit" name="submit" id="submit" value="送信" class="send"> 29</form>
javascript
1$(function () { 2 $('.send').prop("disabled", true); //送信ボタン非動作 3 //入力欄の操作時 4 $('form input').change(function () { 5 //必須項目が空かどうかフラグ 6 var $flag = true; 7 var $cbx_group = $('input:checkbox[name^="group"]'); 8 //チェックボックスグループの必須判定 9 $cbx_group.change(function(){ 10 if($cbx_group.is(':checked')) { 11 $cbx_group.removeAttr('required'); 12 } else { 13 $cbx_group.attr('required', 'required'); 14 } 15 }); 16 17 //必須項目をひとつずつチェック 18 $('form input').each(function (e) { 19 //もし必須項目が空白なら 20 if ($('form input:required').eq(e).val() === '') { 21 $flag = false; 22 } 23 if ($('input[type=radio][required]:checked').length == 0) { 24 $flag = false; 25 } 26 if ($('input[type=checkbox][required]:checked').length > 0) { 27 $flag = true; 28 } else { 29 $flag = false; 30 } 31 }); 32 //全て埋まっていたら 33 if ($flag) { 34 //送信ボタンを復活 35 $('.send').prop("disabled", false); 36 } else { 37 //送信ボタンを閉じる 38 $('.send').prop("disabled", true); 39 } 40 }); 41});
回答2件
あなたの回答
tips
プレビュー