Jquery Click Function Only Working Twice

Question

im having a strange problem with a jquery click function. What is suppose to happen is the user clicks a link '.selectlink' and it ticks a box on the page. This works just fine, click it again and it unticks the box.....also fine, click the link once more and nothing at all happens, click it some more and still nothing happens, so the function only seems to work after two clicks then stops working until the page is refreshed.

$(document).on('click', '.selectlink', function () {
     var myId = $('#check_' + this.id);

     if ($(myId).is(':checked')) {
          $(myId).attr('checked', false);
     } else {
          $(myId).attr('checked', true);
     }

     countChecked();
});

If it is a checkbox, you really should be using prop and not attr. — epascarello
– epascarello, Commented Sep 24, 2013 at 9:20
countchecked looks to see how many boxes on the page have been ticked and displays it as a number at the top of the page. — Iain Simpson
– Iain Simpson, Commented Sep 24, 2013 at 9:23
stackoverflow.com/questions/18977446/… How many times are we asking this today? — epascarello
– epascarello, Commented Sep 24, 2013 at 9:58

rusmus · Accepted Answer · 2013-09-24 09:36:59Z

1

The problem arises because the ':checked' state is determined based on the 'checked' property in the DOM, not the presence, or value of the 'checked' attribute. See the jquery docs for more info on properties vs. attributes: http://api.jquery.com/prop/

In order for it to work (as you have discovered) you have do do this:

var myId = $('#check_' + this.id);
if ($(myId).is(':checked')) {
    $(myId).prop('checked', false);
} else {
    $(myId).prop('checked', true);
}

answered Sep 24, 2013 at 9:36

rusmus

1,66511 silver badges18 bronze badges

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

Comments

BenM · Accepted Answer · 2013-09-24 09:34:38Z

0

How strange, I have found if I use prop instead of attrib it works more than twice now, not idea why ?.

$(document).on('click', '.selectlink', function () {
     var myId = $('#check_' + this.id);
     if ($(myId).is(':checked')) {
         $(myId).prop('checked', false);
     }
     else {
        $(myId).prop('checked', true);
     }
     countChecked();
    });
});

edited Sep 24, 2013 at 9:34

BenM

4,2682 gold badges34 silver badges58 bronze badges

answered Sep 24, 2013 at 9:25

Iain Simpson

8,17113 gold badges49 silver badges67 bronze badges

1 Comment

erickb Over a year ago

attr() might not accept boolean 2nd param. Did you try 0/1 instead?

Piyush Arya · Accepted Answer · 2013-09-24 09:40:11Z

0

try

$(document).off('click').on('click', '.selectlink', function () {

unbind and bind.

answered Sep 24, 2013 at 9:40

Piyush Arya

1795 bronze badges

Collectives™ on Stack Overflow

Jquery Click Function Only Working Twice

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related