CODEWITHSUNDEEP
jqueryjquery-mobile
vini
vini

Reputation: 4740

Dynamically created checkbox in jquery mobile not working

<div class="ui-checkbox">
      <input type="checkbox" value="1" name="reminder" id="reminder" checked="">
      <label for="reminder" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off ui-last-child">Reminder</label>
</div>

I am generating the above css and input checkbox on runtime via jquery however my checkbox isn't selecting could someone help me.

I have tried everything using jquery mobile and nativedroid

enter image description here

Upvotes: 1

Views: 1114

Answers (3)

ezanker
ezanker

Reputation: 24738

For dynamic checkboxes in jQuery Mobile, you need to initialize the widget either by calling .checkboxradio() on the input or .enhanceWithin() on the container, e.g.:

var chk = '<label><input type="checkbox" name="checkbox-0 ">Check me</label>';    
$("#dynCheck").empty().append(chk).enhanceWithin();

This assumes you have a container with id="dynCheck", and you want to empty it before adding the dynamic content.

<div id="dynCheck"></div>

Here is a DEMO

Upvotes: 3

kirk
kirk

Reputation: 1

Your HTML markup just needs to define a checkbox wrapped in a label (or a label using the "for" attribute). jQueryMobile will do the rest, including checking/unchecking. You do not need to define any classes, such as ui-radio, ui-btn, etc.

<label>
   <input type="checkbox" name="checkbox-0 ">Check me
</label>

Documentation: http://demos.jquerymobile.com/1.4.2/checkboxradio-checkbox/

Example: http://jsfiddle.net/3awV7/

Upvotes: 0

Sander van Leeuwen
Sander van Leeuwen

Reputation: 51

How are you generating the above content? I think that's more relevant than the content itself. When creating and checking checkboxes via jQuery, you should use the prop() method to actually check the created boxes.

For example:

$('#reminder').prop('checked', true);

Upvotes: 0

Related Questions