18

我正在使用以下脚本来选择具有给定类的所有复选框。

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').trigger("change");
    });

});

但是我遇到了一个问题，因为取消/选择所有复选框能够取消/选择禁用的复选框。

我试过这个

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class='+ $(this).data('checkbox-name') + !$(:disabled) + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class='+ $(this).data('checkbox-name') + !$(:disabled) + ']').trigger("change");
    });

});

但它不起作用。我做了一个 jsfiddle 来展示这个问题http://jsfiddle.net/e67Fv/

4

4 回答 4

34

嗯...有趣的尝试，但是您不能在选择器中使用 jQuery 对象，因为选择器只是一个普通字符串。

用于排除禁用元素的选择器将是:not(:disabled)，因此您的代码应该是：

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').trigger("change");
  });
});

请注意，您可以链接调用，因此您不必选择两次：

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked")).trigger("change");
  });
});
于 2012-07-12T17:29:01.577 回答
12

使用.not()函数和:disabled选择器的组合来排除这些。

$(':checkbox[class='+ $(this).data('checkbox-name') + ']').not(':disabled').prop("checked", $(this).prop("checked"));
$(':checkbox[class='+ $(this).data('checkbox-name') + ']').not(':disabled').trigger("change");

.not()也作为选择器存在，:not()可以按如下方式使用：

 $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
 $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').trigger("change");
于 2012-07-12T17:15:31.277 回答
4

这是我通常做的：

$(function(){
    $(".selectall").live('change', function(){
        if($(this).is(":checked"))
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "true");
        }
        else
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "false");
        }
    });
});

我希望它有帮助:)

于 2012-07-12T17:19:47.303 回答
2

这与您的原始代码不同。它只会触发那些未更改的更改。我假设您希望在更改后触发所有更改

$(':checkbox.selectall').on('click', function(){
        $(':checkbox .'+ $(this).data('checkbox-name')).not(':disabled').prop("checked", $(this).prop("checked")).trigger("change");
    });
于 2012-07-12T17:27:49.497 回答