Question

我想在选中第一个checkboxes时禁用同一div中的所有checkbox，如果未选中则再次启用。

并为我工作check here

$('.cdls_content_wrapper input:checkbox:first').click(function () {
    alert('HI');
    $('.cdls_content_wrapper').find(':checkbox').slice(1).each(function () {
        if ($('.cdls_content_wrapper input:checkbox:first').is(':checked')) {
            $(this).attr("disabled", true);
        } else {
            $(this).attr("disabled", false);
        }
    });
});

但问题是，当我有另一个相同的div并首先点击该div时checkbox它对所有人都做同样的事情。

我想让我的功能更通用，而不是只针对一个div。

Answer 1

尝试

$('.cdls_content_wrapper').find(':checkbox:first').click(function () {
    $(this).closest('.cdls_content_wrapper').find(':checkbox').not(this).attr('disabled', this.checked)
});

演示：Fiddle

Answer 2

您可以将class添加到all复选框并按以下方式执行：

$('.cdls_content_wrapper input:checkbox.all').click(function(){
    if($(this).is(':checked')){
        $('input:checkbox',$(this).closest('tr').siblings()).attr("disabled", true);
    }else{
        $('input:checkbox',$(this).closest('tr').siblings()).attr("disabled", false);
    }
});

示例fiddle..

Answer 3

只需将函数移出处理程序，如下所示：

function DoWork(TheDiv) {

   var IsFirstChecked;

   TheDiv.find(':checkbox').each(function () {

        if (typeof(IsFirstChecked) !== 'boolean') {
              IsFirstChecked = $(this).prop('checked');
         } else {
              $(this).prop('disabled', IsFirstChecked);
         }
    });
}

然后从任何地方拨打电话：

$('.cdls_content_wrapper').find('input').click(function () {
    DoWork($(this).closest('table'));
});

$('.SomeOtherClass').find('input').click(function () {
    DoWork($(this).closest('table'));
});

这是工作jsFiddle

此外，根据jQuery documentation，使用.prop()比使用.attr()

更好的方法

Answer 4

很抱歉，这次我把它钉了出来！

只需粘贴即可：

$('.cdls_content_wrapper input:checkbox:first').click(function () {
    alert('HI');
    $(this).parent().parent().parent().find(':checkbox').slice(1).each(function () {
        if ($('.cdls_content_wrapper input:checkbox:first').is(':checked')) {
            $(this).attr("disabled", true);
        } else {
            $(this).attr("disabled", false);
        }
    });
});

Answer 5

您必须为两个div中的复选框使用不同的类

仅禁用同一div中的复选框而不是全部

5 个答案: