Question

我是JQuery的新手并且正在努力修复一个问题，当我选中一个Main复选框时，我试图禁用一些复选框。

我有一个包含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个复选框都被选中，没有禁用。仅当我取消选中/再次检查禁用功能发生的主复选框时。此外，再次禁用时，所有辅助复选框都会自动取消选中。

有人可以帮忙吗？

Answer 1

如果我理解你的问题，这应该有效：

$("#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);
});

Answer 2

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

单击复选框上的启用/禁用复选框单击使用JQuery

2 个答案: