Dynamic controlgroup and checkboxes unstyled

by

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

More Related Contents:

  1. How can I check if a checkbox is checked?
  2. How do I create an HTML element with attributes and events using JavaScript?
  3. Setting “checked” for a checkbox with jQuery
  4. Why I have to put all the script to index.html in jquery mobile
  5. Check/Uncheck checkbox with JavaScript
  6. How to implement “select all” check box in HTML?
  7. jQuery checkbox change and click event
  8. How to stop event bubbling on checkbox click
  9. JQGRID – maintain check box selection state – page refresh / redirect / reload
  10. How to check “checkbox” dynamically – jQuery Mobile
  11. Modifying CSS class property values on the fly with JavaScript / jQuery
  12. Why does appending a to a dynamically created seem to run the script in the parent page?
  13. How to select all checkboxes with jQuery?
  14. Jquery Mobile – $.mobile.changepage not loading external .JS files
  15. Javascript dynamically invoke object method from string
  16. Making sure at least one checkbox is checked
  17. How do I encode a JavaScript object as JSON?
  18. JavaScript Dynamic Variable Names
  19. How do i disable a submit button when checkbox is uncheck?
  20. How to swipe top down JQuery mobile
  21. jQuery Mobile : What is the order of page events triggering?
  22. Creating the checkbox dynamically using JavaScript?
  23. What is the correct way to write HTML using Javascript?
  24. Javascript checkbox onChange
  25. How to debug dynamically loaded JavaScript (with jQuery) in the browser’s debugger itself?
  26. submitting a form when a checkbox is checked
  27. Can search engines index JavaScript generated web pages?
  28. Auto Mobile Site Redirect
  29. binding data to angular checkbox
  30. Custom Checkbox

Leave a Comment