Question

I am using a simple prop call to change the state of a jqueryui “toggle” button (aka checkbox) using this:
$("#completed_button").prop("checked", true);

Functionally the checkbox is changing state and the script is operating properly. Unfortunately it is not changing the visual state of the button. Any idea why its not and what I can do to make it so?

Example: Below the middle is what it looks like when you use the mouse to toggle, right is what happens when i use the above call. Notice how the text is correct, but the visual highlight is not.

Answer 1

The problem is that the jQuery-UI elements for the button are listening for change events from the toggle button but the change event doesn’t fire when you say .prop('checked', true). This behavior goes all the way back to the DOM Level 2 Event Model:

The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

Calling .prop('checked', true) (or even .attr('checked', 'checked')) doesn’t alter the focus so no change event occurs.

The solution is to trigger the change event yourself:

$("#completed_button").prop("checked", true).change();

That should let the jQuery-UI wrapper know that the checkbox has changed state and then the jQuery-UI visual will also change.

Here’s a quick demo that illustrates what’s going on: http://jsfiddle.net/ambiguous/8et3G/