jQuery -复选框启用/禁用
jQuery -复选框启用/禁用
提问于 2010-02-25 06:41:31
我有一堆这样的复选框。如果选中了"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>回答 6
Stack Overflow用户
回答已采纳
发布于 2010-02-25 06:45:35
稍微更改您的标记：
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1">Check Me <br>
<input type="checkbox" name="chk9[120]" class="group1"><br>
<input type="checkbox" name="chk9[140]" class="group1"><br>
<input type="checkbox" name="chk9[150]" class="group1"><br>
</form>
您可以使用属性选择器来实现这一点，而无需引入ID和类，但它速度更慢且(imho)更难阅读。
Stack Overflow用户
发布于 2013-12-21 02:36:29
这是最新的解决方案。
<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)Stack Overflow用户
发布于 2010-02-25 06:53:21
<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;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2330209
复制相关文章
相似问题
腾讯云开发者
