The "checked" attribute of checkbox does not get enabled if the html is created dynamically

Question

I have created a listview containing checkbox. On few of the list items I wanted the checkbox to be checked. The listview is created dynamically as the content comes from the server.

I have the following jsfiddle code. http://jsfiddle.net/praleedsuvarna/rN28z/

Can you please help me solve this problem? Thanks in advance

below is an example of my dynamic list content where the 2nd and 3rd checkbox is set to "checked"

$(document).on('pageshow', '#index', function(){     
    var list = '<li>'+
    '   <div class="checkBoxLeft">'+
    '       <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox"/>'+
    '   </div>  '+
    '   <a href="item1.html" class="detailListText">item1</a>'+
    '</li>'+
    '<li>'+
    '   <div class="checkBoxLeft">'+
    '       <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" checked="checked"/>'+
    '   </div>'+
    '   <a href="item1.html" class="detailListText">item2</a>'+
    '</li>'+
    '<li>'+
    '   <div class="checkBoxLeft">'+
    '       <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" checked="checked"/>'+
    '   </div>                     '+
    '   <a href="item1.html" class="detailListText">item3</a>'+
    '</li>'

    $("#viewdata").html(list);
    $("#viewdata").listview("refresh");
});

below is my html page

<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a" id="viewdata">
            </ul>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>

possible duplicate of Checking & Unchecking Checkboxes inside a JQuery Mobile Dialog — mplungjan
– mplungjan, Commented Mar 16, 2013 at 7:57
in that post the checked attribute is set via jquery. I wanted it to be part of my dynamic html. Can you please help me with it? — Prals
– Prals, Commented Mar 16, 2013 at 8:33

dfsq · Accepted Answer · 2013-03-16 08:03:40Z

3

Fixed and a little cleaned up version: http://jsfiddle.net/rN28z/6/

I moved this code:

$('input[type="checkbox"]').each(function() {
    $(this).parent('.checkBoxLeft').addClass(this.checked ? 'checked' : 'not-checked');
});

inside pageshow handler. You were calling it on pagebeforeshow and by that time your HTML had not been yet populated.

answered Mar 16, 2013 at 8:03

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Smile Over a year ago

Hi @dfsq, I'm having same issue. Can you refer this SO question?

Collectives™ on Stack Overflow

The "checked" attribute of checkbox does not get enabled if the html is created dynamically

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related