Question

我有“选择所有复选框”和“取决于复选框”的以下功能，但它无法正常工作。 1.如果我选择“全选”，则“受控”复选框将保持禁用状态 2.当使用“controller”启用“受控”复选框并使用“全部选择”时，“受控”的chackbox保持活动状态。我没有选择它们时需要它们处于非活动状态。

我尝试创建if语句（注释）来解决这个问题，但它没有按预期工作。是否有其他解决方案或者在取消选中“全选”复选框后重置复选框可能会更好？如果重新设置，我只需要重置一组复选框，而不是整个表格。

    $('form').ready(function() {
    var $check1 = $('input[id*=selectAll]'),
        $check2 = $('tr th :checkbox'),
        $checkAll = $check1.add($check2);
    $checkAll.on('click keydown', function () {
        var checkedStatus = this.checked,
            $selected1 = $(this).closest(".formFieldWrapper").find('input:checkbox:not(:first):not([data-leader])'),
            $selected2 = $(this).closest("table").find('tr td :checkbox'),
            $selectedAll = $selected1.add($selected2);
            $selectedAll.each(function () {

           // if($checkAll.prop('checked', true)) {
            $(this).prop('checked', checkedStatus)  //.prop('disabled', false)
           // } else {
           // $(this).prop('checked', checkedStatus);
           // $checkAll.prop('checked', false);
           // $('.controlled').prop('disabled', true)
           // }   

        });
        $selectedAll.on('click keydown', function(){
        $checkAll.prop('checked', false) 
        });
    });
});

$('.controlled').prop('disabled', true);
$('.controller').click(function () {
    var $this = $(this),
        $inputs = $($this.data('target'));
    $inputs.prop('disabled', !this.checked);
    if (!this.checked) {
        $inputs.prop('checked', false);
    }
});

JSFiddle

Answer 1

解决方案：

 var $check1 = $('input[id*=selectAll]'),
        $check2 = $('tr th :checkbox'),
        $checkAll = $check1.add($check2);

    $checkAll.on('click keydown', function () {
        var checkedStatus = this.checked,
            $selected1 = $(this).closest(".formFieldWrapper").find('input:checkbox:not(:first):not([data-leader])'),
            $selected2 = $(this).closest("table").find('tr td :checkbox'),
            $selectedAll = $selected1.add($selected2);

        $selectedAll.each(function () {
            $(this).prop('checked', checkedStatus);

            if (checkedStatus === true) {
                $('.controlled').prop('disabled', false);
            } else {
                $('.controlled').prop('disabled', true);
            }

        });

        $selectedAll.on('click keydown', function () {
            $checkAll.prop('checked', false)
        });
    });


$('.controlled').prop('disabled', true);
$('.controller').click(function () {
    var $this = $(this),
        $inputs = $($this.data('target'));

    $inputs.prop('disabled', !this.checked);
    if (!this.checked) {
        $inputs.prop('checked', false);
    }
});

选中全部，取决于复选框

1 个答案: