Jquery 如果未禁用则选择全部

Question

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

$(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/

Answer 1

嗯...有趣的尝试，但是您不能在选择器内使用 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");
  });
});