Question

I would like to put a nice little data-icon="star" on some chekbox labels of a group of checkboxes. Is there a way to do so using jQuery data-icon or should I just do it directly in the CSS (in which case how do I get the same rendering as the one of data-icon?).

In a dream world, here is what would work:

<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' data-icon='star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>

Thanks a lot for your help

Answer 1

You would have to use your own custom CSS or JS to do this, data-icon only works with a tags per the documentation: http://jquerymobile.com/test/docs/buttons/buttons-icons.html

This is even more tricky because the icon’s are entered as styled spans which is exactly how the jqm checkbox is rendered – they both use the ui-icon for some base styling and positioning.

If you tried to use a jquery function to append it after the jqm styling has worked its magic like so: http://jsfiddle.net/shanabus/zt7cP/1/ – but again, the styling conflicts with the actual checkbox, but the functionality of the checkbox is still there.

Hope this gets you going in the right direction.