如果未禁用，则 Jquery 全选答案

【问题标题】：Jquery select all if not disabled如果未禁用，则 Jquery 全选
【发布时间】：2012-07-12 12:16:03
【问题描述】：

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

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

【问题讨论】：

标签： jquery select checkbox

【解决方案1】：

使用.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");

【讨论】：

【解决方案2】：

这是我通常做的：

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

希望对你有帮助:)

【讨论】：

嗯...你读过这个问题吗？这只是原始代码的一部分。那里没有任何东西可以处理禁用的复选框。
对不起，我忘了在代码中包含它，我只是编辑了我的答案添加：not(:disabled)...

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：