使用 JQuery 在单个复选框单击时启用/禁用复选框答案

【问题标题】：Enabling / Disabling checkboxes on single checkbox click using JQuery使用 JQuery 在单个复选框单击时启用/禁用复选框
【发布时间】：2012-08-21 22:47:25
【问题描述】：

我是jQuery和努力解决问题的问题，在检查一个主复选框时我正在尝试禁用一个问题。

我有一个包含 1 个主复选框和 3 个辅助复选框的表单。当主复选框被选中时，所有其他辅助复选框都被禁用，但默认情况下必须处于选中状态。并且当未选中主要复选框时，所有其他被禁用的辅助复选框都将变为启用并且必须全部选中。默认情况下，当用户到达表单时：必须选中主要复选框，因此必须选中并禁用其他 3 个复选框。

这是我的代码：

<s:checkbox id="primary_CB" name="primaryCB" value="true"/>Primary checkbox
<s:checkbox cssClass="secondary_CB" name="secondary_CB1"/>Secondary checkbox1
<s:checkbox cssClass="secondary_CB" name="secondary_CB2"/>Secondary checkbox2
<s:checkbox cssClass="secondary_CB" name="secondary_CB3"/>Secondary checkbox3

我的 JQuery 代码：

$('#primary_CB').click(function () {
if ($(this).attr('checked')) {
$(".secondary_CB").attr('disabled', 'disabled');
} else {
    $(".secondary_CB").removeAttr('disabled');
    }
});

但是我的代码以奇怪的方式工作，当我第一次在表单上时，所有 4 个复选框都被选中，没有一个被禁用。只有当我取消选中/再次选中禁用功能的主要复选框时。此外，当再次禁用时，所有辅助复选框都会自动取消选中。

有人可以帮忙吗？

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

$('#primary_CB').click(function () {
if ( !$(this).is ( ":checked" ) )
{
$(".secondary_CB").attr ( "disabled" , true );
} else {
    $(".secondary_CB").removeAttr ( "disabled" );
    }
});

【讨论】：

您应该使用.prop() 而不是attr。我们要更改属性，而不是属性。
看起来 .prop() 根本不起作用。我正在使用 jquery-1.3.2，当我使用 .attr() 时，上面的代码就像我上面描述的那样工作（不是我希望的那样），当我用 .prop() 替换它时没有任何反应，好像代码是不在那里。会不会是因为我的 JQuery 版本不包含 prop 方法？

【解决方案2】：

如果我正确理解您的问题，这应该可行：

$("#primary_CB").click(function() {
    $("input.secondary_CB").prop("disabled", !this.checked);
});

对于 1.6 以下的 jQuery

$("#primary_CB").click(function() {
    $("input.secondary_CB").attr("disabled", !this.checked);
});

【讨论】：

或者您可以摆脱 if/else 并直接执行 $("input.secondary_CB").prop("disabled", !this.checked);
@wirey 哦，你这个鬼。当然，有时您会尝试快速回答 :) 更新并感谢您的建议。
刚试了一下，但是好像我在使用 prop() 方法时遇到了问题。我正在使用 jquery-1.3.2。
@user1353307 然后你必须使用.attr()，如果你不能更新到jQuery 1.6+。
@user1353307 使用 attr 而不是 prop then.. 所以对于这行代码只需将 prop 替换为 attr