javascript - 在选中多个复选框之前禁用提交按钮

Question

我想在选中 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="">

我在这里遗漏了一些简单的东西。感谢任何想法!

Answer 1

这里有两个问题。

首先，.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