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

Question

I am using jQuery DataTables plugin. I created a checkbox, that automatically got a aria-label tag.

I think this is causing undesired behaviour and I would like to define a checkbox which does not have this aria-label property.

<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>

I removed the aria-label value by using $("#batch-select-all").removeAttr('aria-label'); but yet the event continues to be triggered.

How I can make this event listener stop listening to click event on the checkbox?

Answer 1

The problem is not in aria-label attribute. Your code seems to be copied from source code inspector, these attributes are generated by jQuery DataTables dynamically.

SOLUTION #1

You can disable sorting for the column with a checkbox, add data-orderable="false" attribute to th element as follows:

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

Also, you can use columns.orderable option to disable ordering on particular column.

See this jsFiddle for code and demonstration.

SOLUTION #2

Alternatively, in your click event handler for the checkbox you need to call stopPropagation() to avoid click event to propagate to table header.

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

See this jsFiddle for code and demonstration.