Cloned checked flag undefined property

Question

I have a series of flags for each day of the week with the mark “All” to check / uncheck all days. My use case requires several sets of these flags, and as I dynamically create them, I used the jQuery.clone () function to duplicate the set and add them to a new line; however, cloned flags do not work correctly. OnClick event fires; but for some reason I can’t access the “checked” property on any of the cloned checkboxes in Chrome. I 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 found that actually returns anything regarding the checked state:

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

I have replication here: http://jsfiddle.net/YfY5U/

In fact, hoping that someone has an idea of ​​what is going on because I am completely stuck :(

Answer 1

In this part of the code:

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

After cloning, you remove the "checked" property. Therefore, it is not surprising that this is undefined. Just change

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

to

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