Question

I have an HTML checkbox element on my page like so:

<input type="checkbox" id="locked" /><label for="locked">Locked</label>

And I make a call inside my $(document).ready() to change this to be a jQuery UI checkbox button like so:

$('#locked').button({
    'icons': {
        'primary': 'ui-icon-unlocked'
    },
    'label': 'Unlocked'
});

Background context being that the user can use this button to lock/unlock a particular entity so that a background process will not alter it and it starts with an ‘Unlocked’ status. If javascript is not turned on, the user sees a checkbox and the label ‘Locked’ next to it.

I want to be able to programmatically check/uncheck this checkbox button. I’ve tried:

$('#locked').attr('checked', false);

But the checkbox button does not update to reflect the underlying control’s checked status.

I could test the checkbox’s checked property then do a .click() if it doesn’t match what I want but that doesn’t sound very elegant.

Answer 1

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.”