Question

I have a table where each row has a <input type="checkbox" /> in the first cell.

I have a click handler setup on the <tr> which among other things toggles the checkbox.

This is working perfect, unless I click on the actual checkbox, which results in the checkbox having the opposite state to what it was supposed to be as it gets toggled twice, once by it’s default behavior, and once by the <tr> event handler.

What I want to do is basically ignore the checkbox click, and just respond to the click on the tr.

Here is my event handler for the tr

$('.files-table tbody').on('click', 'tr', function (e) {
    var check = $('.check', this);
    check.prop('checked', !check.prop('checked'));

    check.prop('checked') ? selected++ : selected--;
    numSelected.html(selected + ' item' + (selected === 1 ? ' ' : 's ' ) + 'selected: ');
    if (selected == 1) {
        withSelected.addClass('in').removeClass('hide');
        noSelected.removeClass('in').addClass('hide');
    } else if (selected == 0) {
        withSelected.removeClass('in').addClass('hide');
        noSelected.addClass('in').removeClass('hide');
    }

    if (check.prop('checked')) {
        selectedItems[check.data('type')].push(check.data('id')+"");
    } else {
        selectedItems[check.data('type')].splice(check.data('id')+"");
    }
    console.log(selectedItems);
    $(this).toggleClass('info');
});

And here is an example row:

<tr>
    <td style="width:15px;">
      <input class="check" type="checkbox" data-id="6" data-type="directories">
    </td>
    <td>
      <a href="/files/browse/1. First/1.1 First Child of First/6" 
         class="needs-tooltip" 
         title="Browse Directory">
        <i class="icon icon-folder-close"></i>
      </a> 
      1.1 First Child of First
    </td>
    <td>Directory</td>
    <td>0 Items</td>
    <td>27 Jan 2013</td>
    <td>--</td>
    <td>--</td>
</tr>

Answer 1

You can check where the click originated from:

if ( ! $(e.target).is(':checkbox') ) {
    $('.check', this).prop('checked', function (i, el) {
        el.checked ? selected-- : selected++;
        return ! el.checked;
    });
}