Checkbox only being checked on the first try, javascript/jquery bug?

Question

Ok so I need to be able to click any element inside .modal-interest, and it for it to check the child-element checkbox when they are clicked.

Currently, it seems to work for the first click - but for every subsequent click, even though the code is supposed to be checking the checkbox, it does nothing.

$('.modal-interest strong').click(function (e) {

 input = $(this).closest('.modal-interest').find('input');

 if (input.prop('checked')) {
     input.attr('checked', false).change();
 } else {
     input.attr('checked', true).change();
 }
});

An accurate representation of my problem can be seen on the following fiddle:

http://jsfiddle.net/c3p5m/

Stuck with this and would appreciate any help!

Dhaval Marthak · Accepted Answer · 2014-03-28 16:32:03Z

1

Use .prop() to set checked/Unchecked

input.prop('checked', false).change();

Fiddle Demo

answered Mar 28, 2014 at 16:32

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

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

Comments

A. Wolff · Accepted Answer · 2014-03-28 16:37:45Z

1

You should use .prop() instead:

DEMO jsFiddle

 $('.modal-interest strong').click(function (e) {

     input = $(this).closest('.modal-interest').find('input');

     if (input.prop('checked')) {
         input.prop('checked', false).change();
         $('h1').html('untick it');
     } else {
         input.prop('checked', true).change();
         $('h1').html('tick it');
     }
 });

Now indeed, your code should look like this instead:

$('.modal-interest strong').click(function (e) {
    var input = $(this).closest('.modal-interest').find('input')[0];
    input.checked = !input.checked;
    $(input).change();
});
$('.modal-interest input[type=checkbox]').on('change', function () {
    $('h1').html(this.checked ? 'tick it' : 'untick it');
});

DEMO

edited Mar 28, 2014 at 16:37

answered Mar 28, 2014 at 16:31

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

pj013 · Accepted Answer · 2014-03-28 16:35:27Z

0

The prop method should be used.

input.prop('checked', false).change();

answered Mar 28, 2014 at 16:35

pj013

1,4291 gold badge12 silver badges31 bronze badges

Comments

Denys Lieu · Accepted Answer · 2014-03-28 16:38:21Z

0

Try this code:

 $('.modal-interest').click(function () {

     var input = $(this).find('input');

     if (input.prop('checked')) {
         input.prop('checked', false).change();
         $('h1').html('untick it');
     } else {
         input.prop('checked', true).change();
         $('h1').html('tick it');
     }
});

answered Mar 28, 2014 at 16:38

Denys Lieu

2702 silver badges9 bronze badges

Collectives™ on Stack Overflow

Checkbox only being checked on the first try, javascript/jquery bug?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related