Jquery: disable the 'click' event on a checkbox

jquery

Solution

You need to check if the `click` event was fired on a `checkbox` or somewhere else. This needs less ressources than a second event handler for the checkbox with `e.stopPropagation`.

    $('.rowclick tr').click(function(e) {
        if($(e.target).closest('input[type="checkbox"]').length > 0){
            //Chechbox clicked
        }else{
            //Clicked somewhere else (-> your code)
            if ($(this).find('td input.charges:checkbox').is(':checked')) {
                $(this).find('td input.charges:checkbox').attr("checked", false);
            }
            else {
                $(this).find('td input.charges:checkbox').attr("checked", true);
            }
        }
    });

Working example: http://jsfiddle.net/KYvCB/5/

Problem

In my current JQuery, I have an event that will either check or uncheck a checkbox if the user clicks on a row in a table. The problem with this is, if the user actually checks the checkbox, the jquery will fire on the checkbox event and either check/uncheck the box, but then the TR event will fire and then undo the checkbox value. See an example here: http://jsfiddle.net/radi8/KYvCB/1/ I can disable the checkbox but then if the user tries to select the checkbox, the TR event will not trigger. What I need is a method to disable the 'click' event of the checkbox but still allow the TR event to fire when the checkbox is selected. ``` var charges = { init: function() { // get the selected row checkbox //$('.charges').attr('disabled', true); $('.rowclick tr').click(function() { if ($(this).find('td input.charges:checkbox').is(':checked')) { $(this).find('td input.charges:checkbox').attr("checked", false); } else { $(this).find('td input.charges:checkbox').attr("checked", true); } }); } }; charges.init(); ```

Original source