Jquery: disable the 'click' event on a checkbox

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

what exactly is wrong with your code? what's the result and what do you expect it to do? — Alp
– Alp, Commented Apr 24, 2012 at 14:07
this example you posted seems to work... what exactly is your question?? — JKirchartz
– JKirchartz, Commented Apr 24, 2012 at 14:07
JKirchartz: no it's not working, if you click on a checkbox, it will toggle twice — tarmaq
– tarmaq, Commented Apr 24, 2012 at 14:20

Alex · Accepted Answer · 2012-04-24 14:11:45Z

16

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/

answered Apr 24, 2012 at 14:11

Alex

6,4362 gold badges22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tarmaq Over a year ago

What if there is another checkbox outside the table? ;]

radi8 Over a year ago

This works perfectly! Thanks so much for the help. As always, you guys on this list are the best!

tarmaq Over a year ago

you're right, my fault... I think this is better: if($(e.target).is(':checkbox')){ //Chechbox clicked } jsfiddle.net/KYvCB/8

Alex Over a year ago

no problem radi8, glad to help you. And tarmaq: yes, it works in this case. you would have problems if the checkbox had child elements (impossible, i know). However, if it was a div element instead of a checkbox, you also need to check if the target is a child of the div.

tarmaq · Accepted Answer · 2012-04-24 14:10:05Z

2

you need to stop propagation of the click event:

var charges = {
    init: function() {
        $('.td input.charges:checkbox').on('click', function (e)
        {
            e.stopPropagation();
        })
        $('.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();

http://jsfiddle.net/KYvCB/4/

answered Apr 24, 2012 at 14:10

tarmaq

4222 silver badges7 bronze badges

Collectives™ on Stack Overflow

Jquery: disable the 'click' event on a checkbox

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related