使用jQuery在窗體上發佈問題

Question

我正在使用jQuery構建一種小型「滑動」窗體模板，而且我被困在一些可能非常愚蠢的東西上。

有一些光確認在腳本文件中去，基本上最初禁用「下一步」按鈕，然後啓用它，一旦你回答了這個問題（無論是單選，多選或文本輸入）。

形式被卡住的第二個問題（Next按鈕永遠不被啓用），即使我切換前兩個<li>元素。這是一個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

確定變更驗證代碼這個

$('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"); 
    } 
});