Dynamic controlgroup and checkboxes unstyled

Solution 1:

When appending checkboxes or radio buttons to a controlgroup dynamically, you deal with two jQuery Mobile widgets, .checkboxradio() and .controlgroup().

Both should be created/updated/enhanced/styled with jQuery Mobile CSS once new elements are added.

The way to achieve this is different in latest stable versions and RC version, but the methods are the same.

jQuery Mobile 1.2.x - 1.3.x (stable versions)

After appending checkbox / radio button to either a static or dynamic controlgroup, .checkboxradio() should be called first to enhance checkbox / radio button markup and then .controlgroup("refresh") to re-style controlgroup div.

$("[type=checkbox]").checkboxradio();
$("[data-role=controlgroup]").controlgroup("refresh");

Demo


jQuery Mobile 1.4.x

The only difference here is elements should be appended to .controlgroup("container")

$("#foo").controlgroup("container").append(elements);

and then enhance both controlgroup and all elements within it, using .enhanceWithin().

$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");

Demo

Solution 2:

First try their own static demo code:

<div  data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <legend>Choose as many snacks as you'd like:</legend>
                    <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
                    <label for="checkbox-1a">Cheetos</label>

                    <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
                    <label for="checkbox-2a">Doritos</label>

                    <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
                    <label for="checkbox-3a">Fritos</label>

                    <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
                    <label for="checkbox-4a">Sun Chips</label>
                </fieldset>
            </div>

They are using just one fieldset as I mentioned in comments.
If this works, then adjust your script to generate the same markup dynamically and then refresh them

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

If this will work with their code, you will know that you have error in markup. If not, there is an error with that refresh function. (I know it's not final solution but you have to do a bit of debugging sometimes :)

Edit:
Found similar problems, solved by using Page()
JQM FAQ
SO Question

Solution 3:

try with $("#<id of fieldset controlgroup>").trigger("create");

http://jsfiddle.net/YKvR3/36/