Programmatically uncheck jQuery UI checkbox button

jQuery 1.5.x and earlier: $('#locked').attr('checked','');

jQuery 1.6.0 and later: $('#locked').prop('checked', false);

The checked attribute is considered a property, and has its own method now. You should use .prop() if it's available to ensure the desired behavior is observed by your users.

Use the new .prop() function in jQuery 1.6+:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

or with id

$('#myCheckboxId').prop('checked', false);

For jQuery 1.5 and below

$('.myCheckbox').attr('checked','checked');
$('.myCheckbox').removeAttr('checked');

In newer versions of JQueryUI the checkboxradio() function must be used with the refresh option like so:

$("#selector").checkboxradio("refresh");

in order to update the checkbox visually after .prop("checked", true); or .prop("checked", false); has been used to check or uncheck the checkbox itself.

Source: The API documentation: http://api.jqueryui.com/checkboxradio/

refresh()

Refreshes the visual state of the widget. Useful for updating after the native element's checked or disabled state is changed programmatically.

Try this one:

$('#locked').removeAttr('checked');

It's just a guess to your case, but usually works for me like a charm.

EDIT: Taking a look at jQueryUI documentation, here is a method you should also try after changing programatically the state of the checkbox:

$('#locked').button( "refresh" )

"Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically."