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

How to prevent click on "Select all" checkbox to affect header and column sorting

本文关键字：标题 影响 排序 复选框 何防止 全选      更新时间：2023-09-26

我使用jQuery数据表插件。我创建了一个复选框，它自动获得了一个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值，但事件继续被触发。

如何使此事件侦听器停止侦听复选框上的单击事件?

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

解决方案# 1

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

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

也可以使用columns.orderable选项来禁用特定列的排序。

查看jsFiddle的代码和演示。

解决方案# 2

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

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