jQueryを使用したフォームでの問題

Question

jQueryを使用して小さな「スライド」フォームテンプレートを構築していますが、私はおそらく非常にばかげたものに取り組んでいます。

スクリプトファイルでは、基本的には「次へ」ボタンを無効にしてから、質問に答えたら（ラジオ、チェックボックス、テキスト入力など）、軽い検証が行われます。

最初の2つの<li>要素を切り替える場合でも、フォームは2番目の質問（次のボタンは有効になりません）で停止します。ここにjsfiddleがあります。あなたが私の頭を壁に打つのをやめさせることができれば、私は感謝しています。

https://jsfiddle.net/ntnr/6szynjqj/1/

HTML

<ul id="rom"> 
     <li class="active"> 
     <div class="form-group checkbox-group" required> 
      <h3>CHECKBOX! What is Your Favorite Pet? (1)</h3> 
      <div class="checkbox"> 
       <label><input type="checkbox" name="pet" value="cat">Cats</label> 
      </div> 
      <div class="checkbox"> 
       <label><input type="checkbox" name="pet" value="dog">Dogs</label> 
      </div> 
      <div class="checkbox"> 
       <label><input type="checkbox" name="pet" value="rabbit">Rabbits</label> 
      </div> 
     </div> 
     </li> 

     <li> 
     <div class="form-group radio-group" required> 
      <h3>RADIO! What is Your Favorite Book? (2)</h3> 
      <div class="radio"> 
       <label><input type="radio" name="book" value="this">This one</label> 
      </div> 
      <div class="radio"> 
       <label><input type="radio" name="book" value="that">That one</label> 
      </div> 
      <div class="radio"> 
       <label><input type="radio" name="book" value="other">The other one</label> 
      </div> 
     </div> 
     </li> 

     <li> 
     <div class="form-group input-group" required> 
      <h3>INPUT! What is Your Favorite Time of the Day? (3)</h3> 
      <div class="input"> 
       <label><input #superbutton type="input" name="time" value="morning"></label> 
      </div> 
     </div> 
     </li> 
     </ul> 

JS

$(document).ready(function() { 
var prev_button = $('<button class="btn prev" style="margin-right:5px;">Prev</button>'); 
var next_button = $('<button class="btn next" disabled>Next</button>'); 

$('#rom > li').append(prev_button); 
$('#rom > li').append(next_button); 
$('#rom > li').first().find('button.prev').hide(); 
$('#rom > li').last().find('button.next').hide(); 

$('.prev').on('click', function() { 
    $(this).closest('li').removeClass('active'); 
    $(this).closest('li').prev().addClass('active'); 
}); 

$('.next').on('click', function() { 
    $(this).closest('li').removeClass('active'); 
    $(this).closest('li').next().addClass('active'); 
}); 

// Validation (non-empty) for Input fields 
$('.input-group input').keyup(function() { 
    var empty = false; 
    $('.field input').each(function() { 
     if ($(this).val().length == 0) { 
      empty = true; 
     } 
    }); 
    if (empty) { 
     $(this).closest(button.next).attr('disabled', 'disabled'); 
    } else { 
     $(this).closest(button.next).attr('disabled', false); 
    } 
}); 

// Validation (non-empty) for Checkboxes 
var checkBoxes = $('#rom > li.active').find('.checkbox-group input[type="checkbox"]'); 
checkBoxes.change(function() { 
    $(this).closest('li').find('button.next').prop('disabled', checkBoxes.filter(':checked').length < 1); 
}); 
$('.checkbox-group input[type="checkbox"]').change(); 

// Validation (non-empty) for Radio Buttons 
$('#rom > li.active').find('input:radio').click(function() { 
    $(this).closest('li').find('button.next').removeAttr('disabled', 'disabled'); 
});}); 

Answer 1

[OK]を、この

$('input').click(function(){ 

     var checkBoxes = $('.active input[type="checkbox"]'); 
     if($(this).is(':radio')){ 
     console.log("radio"); 
     $(this).closest('li').find('button.next').removeAttr('disabled', 'disabled'); 
     }else if($(this).is(':checkbox') && $(this).is(':checked')){ 
     console.log("checkbox"); 
     $(this).closest('li').find('button.next').prop('disabled', checkBoxes.filter(':checked').length < 1); 

     } 

    }); 

にバリデーションコードを変更してからkeyupコードを変更これまで

$('.input-group input').keyup(function() { 
    console.log("keyup"); 

    var empty = false; 

     if ($(this).val().length == 0) { 
      empty = true; 
      console.log("empty true"); 
     } 

    if (empty) { 
     $(this).closest('.active').find('.next').attr('disabled', 'disabled'); 

    } else { 
     $(this).closest('.active').find('.next').attr('disabled', false).css("display","inline-block"); 
    } 
});