Q&A
回答ありがとうございます。
「&&」と「#SB1,#SB2,#SB3」のような指定方法の挙動を理解しておりませんでした。
提供していただいたコードで試したのですが、次のセレクトボックスへの入力可の挙動はうまくできたのですが、全部の値が入った時の送信ボタンの入力可の挙動がうまくできませんでした。
一度すべて入力してから、すべての値を「---」にすると入力可能になりました。
###前提・実現したいこと
現在3つの異なるセレクトボックスのoptionが空（value=""）でなければ送信ボタンが押下できるような挙動をするプログラムを組みたいのですが、うまくできませんでした。
###発生している問題・エラーメッセージ
自分が書いたコードですと「#SB1」と「#SB2」のオプションを「---」としても、「#SB3」のセレクトボックスの値が入っていると送信できてしまいます。
また、「#SB1」のセレクトボックスの選択された値が空でなければ、「#SB2」が入力でき、「#SB2」のセレクトボックスの選択された値が空でなければ、「#SB3」が入力できるようにしたいです。
###該当のソースコード
HTML
1 <form action="" metohd="post"> 2 <select id="SB1" name="example1"> 3 <option value="">---</option> 4 <option value="サンプル1">サンプル1</option> 5 <option value="サンプル2">サンプル2</option> 6 <option value="サンプル3">サンプル3</option> 7 </select> 8 <select id="SB2" name="example2"> 9 <option value="">---</option> 10 <option value="サンプル4">サンプル4</option> 11 <option value="サンプル5">サンプル5</option> 12 <option value="サンプル6">サンプル6</option> 13 </select> 14 <select id="SB3" name="example3"> 15 <option value="">---</option> 16 <option value="サンプル7">サンプル7</option> 17 <option value="サンプル8">サンプル8</option> 18 <option value="サンプル9">サンプル9</option> 19 </select> 20 <input type="submit" value="送信"> 21 </form>
###該当のソースコード
js
1 <script> 2 $(function(){ 3 //デフォルトでdisable 4 $('#SB2, #SB3, input[type="submit"]').prop('disabled', true); 5 6 //条件によりdisabledを解除 7 $('#SB1').change(function() { 8 if($(this).val != ""){ 9 $('#SB2').prop('disabled', false); 10 } 11 }); 12 $('#SB2').change(function() { 13 if($(this).val != ""){ 14 $('#SB3').prop('disabled', false); 15 } 16 }); 17 18 $('#SB1,#SB2,#SB3').change(function () { 19 if($('#SB1' && '#SB2' && '#SB3').val() != ""){ 20 $('input[type="submit"]').prop('disabled', false); 21 } 22 if($('#SB1' && '#SB2' && '#SB3').val() == ""){ 23 $('input[type="submit"]').prop('disabled', true); 24 } 25 }); 26 }); 27 </script>
回答2件
0
ベストアンサー
javascript
1if($('#SB1' && '#SB2' && '#SB3').val() != ""){ 2 $('input[type="submit"]').prop('disabled', false); 3} 4if($('#SB1' && '#SB2' && '#SB3').val() == ""){ 5$('input[type="submit"]').prop('disabled', true); 6}
この部分のコードがおかしいですね。やりたいことは、#SB1と#SB2と#SB3の値が全て入っていれば、ということなのでしょうけど、値と比較した判定は1つずつ行ってください。
javascript
1 var flag = ($('#SB1').val() != "")&&($('#SB2').val() != "")&&($('#SB3').val() != "");// 値は全て入ったか？ 2 $('input[type="submit"]').prop('disabled', !flag);
余談ですが、セレクトボックスの最初に表示される---は、↓のような属性を指定をしておくと、一度有効な選択を選んだあと、二度と表示されなくなり、非常に便利です。
html
1<option value='' disabled selected style='display:none;'>---</option>
投稿2017/07/17 06:51
編集2017/07/17 06:52
総合スコア1441
0
$('#SB1' && '#SB2' && '#SB3').val() は $('#SB3').val() と同じ。
ちなみに$('#SB1,#SB2,#SB3').val() と書いても「#SB1,#SB2,#SB3」の中で1番最初の要素の値しか取れない。
JavaScript
1$( function() { 2 $('#SB2, #SB3, input[type="submit"]').prop('disabled', true); 3 4 $('#SB1').change(function() { 5 $('#SB2').prop('disabled', ($(this).val == "")); 6 }); 7 $('#SB2').change(function() { 8 $('#SB3').prop('disabled', ($(this).val == "")); 9 }); 10 11 $('#SB1,#SB2,#SB3').change(function () { 12 // 今回は「空であれば」なのでそれぞれの.val()を足している。 13 $('input[type="submit"]').prop('disabled', (($('#SB1').val() + $('#SB2').val() + $('#SB3').val()) != "")); 14 }); 15});//未テスト
【JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita】
http://qiita.com/Imamotty/items/bc659569239379dded55
投稿2017/07/17 06:51
編集2017/07/17 06:54
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/17 07:14
2017/07/17 09:15
2019/04/15 02:30
2019/04/15 02:30
2019/04/15 02:30