如何防止单击“全选”复选框影响标题和列排序答案

【问题标题】：How to prevent click on "Select all" checkbox to affect header and column sorting如何防止单击“全选”复选框影响标题和列排序
【发布时间】：2015-10-09 12:36:53
【问题描述】：

我正在使用 jQuery DataTables 插件。我创建了一个复选框，它会自动获得一个aria-label 标签。

我认为这会导致不良行为，我想定义一个没有此 aria-label 属性的复选框。

<th id="batch-select-all" class="sorting" tabindex="0" aria-controls="board" rowspan="1" colspan="1" style="width: 21px;" aria-label=": activate to sort column ascending">
  <input type="checkbox">
</th>

我使用$("#batch-select-all").removeAttr('aria-label'); 删除了aria-label 值，但事件仍然被触发。

如何让这个事件监听器停止监听复选框上的点击事件？

【问题讨论】：

我建议将代码粘贴到这个问题中，而不是发布屏幕截图。
@HunterStevens 我已经这样做了.. 现在你能看一下吗？
什么是“不良行为”？
基本上，复选框不是用来排序的。它的作用是可以检查，一次检查下面的复选框。结果，它抛出了这个错误。理想情况下，我不希望有排序行为
@markpsmith 你知道我如何定义复选框以使其没有这种排序行为

标签： javascript jquery html datatables

【解决方案1】：

问题不在aria-label 属性中。您的代码似乎是从源代码检查器中复制的，这些属性是由 jQuery DataTables 动态生成的。

解决方案 #1

您可以使用复选框禁用列的排序，将data-orderable="false"属性添加到th元素，如下所示：

<th id="batch-select-all" data-orderable="false">
  <input type="checkbox">
</th>

此外，您可以使用columns.orderable 选项来禁用特定列的排序。

有关代码和演示，请参阅 this jsFiddle。

解决方案 #2

或者，在复选框的单击事件处理程序中，您需要调用 stopPropagation() 以避免单击事件传播到表头。

$('#example thead th').on('click', '#select-all', function(e){
   e.stopPropagation();
});

有关代码和演示，请参阅 this jsFiddle。

【讨论】：