質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2929閲覧

チェックボックスやラジオ等の必須項目が埋まった場合のみ送信ボタンを動かしたい。

cofcof

総合スコア37

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/08/19 07:54

編集2019/08/20 23:51

フォームで、必須項目が埋まり、ラジオボタンやチェックボックスが最低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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/08/19 07:59

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
m.ts10806

2019/08/19 08:12

>$('form input') 提示されたHTMLには<form>がありません そちらも含めてご提示ください。
m.ts10806

2019/08/19 08:31

あと今回の仕様だとrequiredをつける意味ないと思います。 押せるようになったとして、例えばチェックボックスは全部チェック入れないと送信ボタン押してもブラウザがエラー出して送信できません。
guest

回答2

0

ベストアンサー

チェックボックスには required 属性はつけないほうがいいでしょう。
.each() を使うなら this などで今回している要素のみを見たほうがいいです。

jQuery

1 $('form input[type="text"]:required').each(function(index, element) { 2 if ($(element).val() === '') { 3 $flag = false; 4 return false; 5 } 6 }); 7 8 if ($('input[type="radio"][required]:checked').length === 0) { 9 $flag = false; 10 } 11 12 if ($('input[type="checkbox"]:checked').length === 0) { 13 $flag = false; 14 }

https://api.jquery.com/each/

投稿2019/08/19 08:36

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cofcof

2019/08/20 23:40 編集

ありがとうございます。 こちらを参考にしたところ、一応想定通りに動きました。 実際にはこんな形で入れ込んでいます(text以外も増やしてみました) /必須項目をひとつずつチェック $('[type="text"]:required').each(function (index, element) { if ($(element).val() === '') { $flag = false; return false; } }); $('[type="tel"]:required').each(function (index, element) { if ($(element).val() === '') { $flag = false; return false; } }); $('[type="email"]:required').each(function (index, element) { if ($(element).val() === '') { $flag = false; return false; } }); $('[type="radio"]:required').each(function () { if ($('input[type="radio"][required]:checked').length === 0) { $flag = false; } }); $('[type="checkbox"]').each(function () { if ($('input[type="checkbox"]:checked').length === 0) { $flag = false; } }); 色々テストしていますが、現状ラジオボタングループなどを複数入れた時にflagがtrueになってしまいますが、それ以外は問題なく動きました。 そちらはもう少し色々調べてみます。 ありがとうございました!
guest

0

JavaScript

1 $('form input').each(function (e) { 2 //もし必須項目が空白なら 3 if ($('form input:required').eq(e).val() === '') { 4 $flag = false; 5 } 6 if ($('input[type=radio][required]:checked').length == 0) { 7 $flag = false; 8 } 9 if ($('input[type=checkbox][required]:checked').length > 0) { 10 $flag = true; 11 } else { 12 $flag = false; 13 } 14 });

このコードの通りだとすると、

  • form input:required は、type=radio も type=checkbox も含んでしまう
  • 結局 type=checkbox で required なものが一つ以上チェックされていれば、$flag が true にセットされてしまう(他の部分で false になったとしても)

というような動きをしてしまうはずです。

こんな風にしないとダメでは?

JavaScript

1var flag = true; 2$('form input:required').each(function(e) { 3 switch($(this).attr('type')) { 4 case 'radio': 5 case 'checkbox': 6 case 'select': 7 // radio や checkbox や select は別の方法でチェックするのでこのループでは処理しない 8 continue; 9 default: 10 if ($(this).val() === '') { 11 flag = false; 12 } 13 break; 14 } 15}); 16if (flag) { 17 $('input[type=radio][required]:checked').length == 0) { 18 flag = false; 19 } 20} 21if (flag) { 22 $('input[type=checkbox][required]:checked').length == 0) { 23 flag = false; 24 } 25}

投稿2019/08/19 08:34

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cofcof

2019/08/20 23:39

回答ありがとうございます! ですがすいません、試したところ文法的におかしいようでうまく動きませんでした。 前半部分の理解が私ではうまくできず、ちょっと解決まで導けませんでした。 もっと勉強してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問