Add checkboxes dynamically to controlgroup

Question

<div data-role="fieldcontain">
    <div id="listado" data-role="listview">
        <fieldset data-role="controlgroup" id="equiposHechos">

        </fieldset>
    </div>
</div>

and my javascript is

var identificador=4
$( "#recibo" ).on( "pageinit", function( event ) {      
    for(i=0;i<=identificador;i++){      
        $("#equiposHechos").append('<input type="checkbox" name="calificarEquipo'+i+' id="calificarEquipo'+i+'"/>'+'<label for="calificarEquipo'+i+'">Equipo Numero'+(i+1)+'</label>');     
    }
})

I want to add checkboxes dynamically ... but I get no styles as I do to recharge them or that they charge me as they should be when they are static

score 1 · Answer 1 · answered Dec 19 '13 at 21:34

If you're using jQuery Mobile 1.3.2 or below, you need first to enhance/style markup of checkbox or radio buttons using .checkboxradio() and then re-style controlgroup by calling .controlgroup("refresh").

var identificador = 4;

for (i = 0; i <= identificador; i++) {
  $('<label for="foo' + i + '">Foo' + i + '<input type="checkbox" id="foo' + i + '"/></label>').appendTo("#equiposHechos");
}

/* widgets enhancement */
$("[type=checkbox]").checkboxradio();
$("#equiposHechos").controlgroup("refresh");

Demo

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

You have to explicitely ask jquery mobile to restyle them:

Check this: Dynamic controlgroup and checkboxes unstyled

$("input[type='checkbox']").checkboxradio("refresh");

edited May 23 '17 at 11:50

Community

1
1

answered Dec 19 '13 at 19:15

ProGM

6,949
4
33
52

I do not work with this :( – user3120407 Dec 19 '13 at 19:33
ok, try simply using `$("#equiposHechos").trigger("create");` after creating the inputs – ProGM Dec 19 '13 at 19:48

Add checkboxes dynamically to controlgroup

2 Answers2