Can't (Consistently) Set a jQuery Mobile Checkbox in a Panel
Hello,
I have a checkbox in a Panel. I have setup a handler to fire on the panelbeforeopen event to set the state of the checkbox based on a cookie value and for debugging I manipulate the cookie value using a Firefox plugin. My "dumbed down" code for debugging this is:
- if ('On' == $.cookies.get('cookieID)) {
- // The cookie is "On" so "check" the checkbox.
- $('#checkboxID').attr("checked",true);
- console.log('Checkbox checked = ',$('#checkboxID').prop('checked')); // should always show true!
- $('#checkboxID').checkboxradio("refresh");
- }
- else {
- // The cookie is not "On" so "un-check" the checkbox.
- $('#checkboxID').attr("checked",false);
- console.log('Checkbox checked = ',$('#checkboxID').prop('checked')); // should always show false!
- $('#checkboxID').checkboxradio("refresh");
- }
1) I initially set the cookie "On" and open the panel. The Firebug debugger shows that the above code is triggered and the code to "check" the checkbox (true) is executed, the console log shows the checkbox is "true" and after the panel opens the checkbox appears checked. So far, good.
2) Then I close the panel and change the cookie to "Off". I repeat the above steps and see that this time we execute the code that "un-checks" (false) the checkbox, the console log shows the checkbox is "false" and after the panel opens the checkbox appears un-checked. Still good.
3) But, once I change the cookie back to "On" and reopen the panel and see that the code to check the checkbox is executed the console log shows that the checkbox is false (un-checked and not surprisingly visually it is unchecked as well)! That is, I am able to use $('#checkboxID').attr("checked",...); to set the checkbox true, then false but when I set it back to true again it refuses to change!
Since I see the code execute correctly all three times but after the 2nd time the console log shows that checkbox no longer changes, I am stumped. Can anyone explain what is going wrong here?
Thank you.