我有一堆这样的复选框。如果“Check Me”复选框被选中,所有其他3个复选框都应该被启用,否则它们应该被禁用。我如何使用jQuery做到这一点?
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>
$("#chkAll").click(function() {
$(".chkGroup").attr("checked", this.checked);
});
添加功能,以确保所有复选框都被选中/检查,如果所有单独的复选框都被选中:
$(".chkGroup").click(function() {
$("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});
这是最新的解决方案。
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1" />Check Me
<input type="checkbox" name="chk9[120]" class="group1" />
<input type="checkbox" name="chk9[140]" class="group1" />
<input type="checkbox" name="chk9[150]" class="group1" />
</form>
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
$("input.group1").prop("disabled", !this.checked);
}
下面是.attr()和.prop()的使用细节。
jQuery 1.6 +
使用新的.prop()函数:
$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);
jQuery 1.5及以下版本
.prop()函数不可用,因此需要使用.attr()。
要禁用复选框(通过设置disabled属性的值),请执行
$("input.group1").attr('disabled','disabled');
要启用(通过完全删除属性),请执行
$("input.group1").removeAttr('disabled');
任意版本的jQuery
如果您只使用一个元素,那么使用DOMElement总是最快的。Disabled = true。使用.prop()和.attr()函数的好处是它们将对所有匹配的元素进行操作。
// Assuming an event handler on a checkbox
if (this.disabled)
参考:设置“检查”的复选框与jQuery?