Question

It looks like jQM uses CSS checkboxes. Is there any simple way to toggle states? Or do I need to always change the class via CSS?

Off

<label id="RememberMe" for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-off ui-btn-up-c">
    <span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last" aria-hidden="true">
        <span class="ui-btn-text">Memorize</span>
        <span class="ui-icon ui-icon-shadow ui-icon-checkbox-off"></span>
    </span>
</label>

ON

<label id="RememberMe" for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c">
    <span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last" aria-hidden="true">
        <span class="ui-btn-text">Memorize</span>
        <span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span>
    </span>
</label>

Is there a simpler way than to change CSS class?

Answer 1

You only have to change the checked property of the underlying <input> element, then refresh the jQuery Mobile widget:

$("#checkbox-1").prop("checked", true).checkboxradio("refresh");