如何防止点击＆＃34;选择全部＆＃34;复选框以影响标题和列排序

Question

我正在使用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>

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

如何让此事件监听器停止侦听复选框上的click事件？

Answer 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以获取代码和演示。