我想禁用一个表单提交按钮,直到选中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