html
1<div class="q1"> 2 <div class="q-num">質問1</div> 3 <p class="q-txt">あなたは朝食で主に何を食べますか?</p> 4 <ul> 5 <li><label><input name="q1" type="checkbox">ごはん・パン</label></li> 6 <li><label><input name="q1" type="checkbox">麺類</label></li> 7 <li><label><input name="q1" type="checkbox">揚げ物</label></li> 8 </ul> 9</div> 10<div class="q2"> 11 <div class="q-num">質問2</div> 12 <p class="q-txt">運動は苦手ですか?</p> 13 <div class="radio_btn"> 14 <input name="q2" type="radio" id="q2-1" disabled><label for="q2-1">Yes</label> 15 <input name="q2" type="radio" id="q2-2" disabled><label for="q2-2">No</label> 16 </div> 17 <p class="error_txt1">質問1を選択してください。</p><!-- エラー文 ---> 18</div>
javascript
1$(function(){ 2 // 初期状態のボタンは無効 3 $('input[name="q2"]').prop('disabled', true); 4 // チェックボックスの状態が変わったら(クリックされたら) 5 $('input[name="q1"]').on('change', function () { 6 // チェックされている数が1と同じか1以上だったら 7 if ($("input[name=q1]:checked").length >= 1) { 8 // ボタン有効 9 $('input[name="q2"]').prop("disabled", false); 10 $('error_txt1').hide(); // q1がチェックされたらエラー非表示 ※これを書く場所がおかしい? 11 } else { 12 // ボタン無効 13 $('input[name="q2"]').prop("disabled", true); 14 } 15 }); 16 $('.q2').click(function() { 17 // q1のチェックされている数が0か0以下だったら 18 if ($('input[name=q1]:checked').length >= 0) { 19 // エラー表示 20 $('.error_txt1').show(); 21 } else { 22 // エラー表示しない 23 $('error_txt1').hide(); 24 } 25 });
条件を別に記述する方が良いのでしょうか?
それとも別の方法がありますか?
質問2の解答(エリア)をクリックした際に質問1を答えてなければ、エラー文を表示し、
その後に質問1を答えた場合に、質問2のエラー文を非表示にしたいです。
どなたかご教示いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー