Jquery Mobile Checkbox issue

Question

I´m trying to change the checkbox status (checked / unchecked) using JQM.

In the HTML part i have a checkbox, a button Clear and a button Set.

In the Java Script part i have the code to clear and to set the checkbox "checked" value using the buttons

 HTML code piece:
 ----------------
 <label><input type="checkbox" name="checkboxName" id="checkboxID">checkbox</label>
 <a href="#" id="clear" data-role="button" data-inline="true" data-theme="b">Clear</a>
 <a href="#" id="set" data-role="button" data-inline="true" data-theme="b">Set</a>

 JS code piece:
 --------------
 $("#clear").click(function() {
    $('#checkboxID').filter(':checkbox').prop('checked',false);
 });

 $("#set").click(function() {
    $('#checkboxID').filter(':checkbox').prop('checked',true);
 });

Check this example in: http://jsfiddle.net/VXwzp/14/

You will notice by hitting the button Set or Clear it is not working.

I´m using Google Chrome Version 26.0.1410.64 m

I have noticed, in case i remove the tag from input it works fine but the JQM style is not being taken into account.

 <input type="checkbox" name="checkboxName" id="checkboxID">

Check the example in: http://jsfiddle.net/QLzBX/1/

Do you have any idea how to get it work using JQM?

Thank you in advance

Alvaro

Answer 1

Working example: http://jsfiddle.net/Gajotres/VXwzp/15/

$("#clear").click(function() {
    $('#checkboxID').filter(':checkbox').prop('checked',false).checkboxradio("refresh");
});

$("#set").click(function() {
    $('#checkboxID').filter(':checkbox').prop('checked',true).checkboxradio("refresh");
});

When working with jQuery Mobile you must understand how its widgets markup can be changed, to find out take a look at my other answer: jQuery Mobile: Markup Enhancement of dynamically added content