Cloned checkbox "checked" property undefined

Question

I have a series of checkboxes for each day of the week with an "All" checkbox to check/uncheck all days. My use case requires multiple sets of these checkboxes, and as I'm creating them dynamically, I used the jQuery.clone() function to duplicate the set and add them to a new row; however the cloned checkboxes do not work correctly. The OnClick event fires; but for whatever reason, I can't access the 'checked' property on any of the cloned checkboxes in Chrome. I have tried the following methods (using the All checkbox as an example):

$('input[name="all"]:last').prop('checked')
$('input[name="all"]:last')[0].checked
$('input[name="all"]:last').attr('checked')

All return undefined. The only method I have found that actually returns anything with regards to the checked state is:

$('input[name="all"]:last').is(':checked')

I have the bug replicated here: http://jsfiddle.net/YfY5U/

Really hoping someone has some idea of what's going on, because I'm totally stuck :(

Put all relevant code directly in the question instead of making your question dependent on some other site.. There's not enough info here to give an answer. — cookie monster

rsobon rsobon · Accepted Answer · 2014-06-06T16:16:06

In this part of code:

var new_content = $('.initial').clone()
        .removeClass('initial')
        .find(':checkbox').each(function(){
            $(this).removeProp('checked');
        }).end().appendTo('fieldset');

You are removing property "checked" after cloning. So no surprised that it is undefined. Just change

$(this).removeProp('checked');

to

$(this).prop('checked', false)

Cloned checkbox "checked" property undefined

1 Answers