Question

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();

Answer 1

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/