我想禁用一个表单提交按钮,直到选中4个复选框。我创建了一个快速的jsfiddle来代表我的代码无法正常工作。

这是我的JS:

$(function() {
  $("#question1, #question2, #question3, #question4").change(function() {
    if( $("#question1").checked && $("#question2").checked && $("#question3").checked &&       $("#question4").checked ) {
      $('.next_button').disabled = false;
    }
    else {
      $('.next_button').disabled = true;
    }
  });
});

和HTML:
<input id="question1" name="question1" type="checkbox" value="1">
<input id="question2" name="question2" type="checkbox" value="1">
<input id="question3" name="question3" type="checkbox" value="1">
<input id="question4" name="question4" type="checkbox" value="1">
<input class="next_button" name="commit" type="submit" value="Next" disabled="">

我在这里错过了一些简单的事情。感谢任何想法!

最佳答案

这里有两个问题。

首先,.checked是一个Javascript属性,因此无法在jQuery对象上使用它。您将需要改用jQuery的.is(':checked')调用。

其次,在您发布的JSFiddle上,您使用的是jQuery 1.4.4版本,该版本不支持.prop()属性的disabled,因此您将需要使用attr()函数来切换disabled状态。

请参阅下面的更新功能:

$(function () {
    $("#question1, #question2, #question3, #question4").change(function () {
        if ($("#question1").is(':checked') &&
            $("#question2").is(':checked') &&
            $("#question3").is(':checked') &&
            $("#question4").is(':checked') ) {
            $('.next_button').attr('disabled', false);
        } else {
            $('.next_button').attr('disabled', true);
        }
    });

});

工作代码位于:JSFiddle

10-05 20:53
查看更多