Don't select row when a checkbox is clicked within that row

jmp97

Hello, I have a datatable that inside, in one of the cells, has a checkbox, and I want that when the checkbox is clicked, the row is not selected.

HTML:

<table id="top_chart" class="table table-striped dataTable no-footer" style="width:100%" role="grid" aria-describedby="top_chart_info">
   <thead>
      <tr role="row">
         <th class="sorting sorting_asc" tabindex="0" aria-controls="top_chart" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 71.5156px;">Name</th>
         <th class="sorting" tabindex="0" aria-controls="top_chart" rowspan="1" colspan="1" aria-label="Users: activate to sort column ascending" style="width: 42.5156px;">Users</th>
         <th class="sorting" tabindex="0" aria-controls="top_chart" rowspan="1" colspan="1" aria-label="Unique values: activate to sort column ascending" style="width: 52.9219px;">Unique values</th>
         <th class="sorting" tabindex="0" aria-controls="top_chart" rowspan="1" colspan="1" aria-label="Multiple values: activate to sort column ascending" style="width: 58.8906px;">Multiple values</th>
         <th class="sorting" tabindex="0" aria-controls="top_chart" rowspan="1" colspan="1" aria-label="Ratio: activate to sort column ascending" style="width: 38.5781px;">Ratio</th>
         <th class="sorting" tabindex="0" aria-controls="top_chart" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 85.5625px;">Description</th>
         <th class="sorting" tabindex="0" aria-controls="top_chart" rowspan="1" colspan="1" aria-label="Relation: activate to sort column ascending" style="width: 61.0312px;">Relation</th>
         <th class="sorting" tabindex="0" aria-controls="top_chart" rowspan="1" colspan="1" aria-label="Selection: activate to sort column ascending" style="width: 69.6406px;">Selection</th>
      </tr>
   </thead>
   <tbody>
      <tr class="odd">
         <td class="sorting_1">Organismo Nivel 2</td>
         <td>51563</td>
         <td>417</td>
         <td>0</td>
         <td>0.59</td>
         <td></td>
         <td></td>
         <td><input class="form-check-input" type="checkbox" value="" onchange="analysis_attributes_list_checkbox_handler(this)" checked=""></td>
      </tr>
   </tbody>
</table>

Initialization:

$('#top_chart').DataTable({
                "pageLength": 5,
                "lengthMenu": [[5, 10, 20, -1], [5, 10, 20, 'All']],
                "destroy": true,
                "select": {
                    style: 'single',
                },
                "responsive": true,
                "initComplete": function () {
                    this.api().row({order: 'current'}, 0).select();
                }
            });

And when I click the checkbox, the row is selected ...

I have tried several solutions that I have seen in the forum, but I can't find any that work, and I don't know what to do anymore ...

jmp97

I can't edit the main post, so I put it here, this would be something similar to what I have, but less messy:

http://jsfiddle.net/b7Lfgcx8/3/

colin

It looks like this example here is what you're looking for. Can you take a look, please, and see if that gets you going,

Colin