Programmatically uncheck jQuery UI checkbox button

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.

JQuery UI's Button on INPUT shouldnt change any HTML. So what ur writing should be possible. Could you write more of the check/uncheck you are using? — Marco Johannesen
– Marco Johannesen, Commented Sep 12, 2011 at 14:22

tonycoupland · Accepted Answer · 2012-11-01 15:18:32Z

35

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

edited Nov 1, 2012 at 15:18

tonycoupland

4,2671 gold badge30 silver badges27 bronze badges

answered Sep 12, 2011 at 14:22

Zsolt

4904 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A. Murray Over a year ago

The combination of removeAttr and button('refresh') worked. Many thanks!

Encoder Over a year ago

Just FYI... button and buttonset both support the "refresh" command!

Blazemonger Over a year ago

In current versions of jQuery, this will not produce the desired behavior. You must use .prop() instead.

Blazemonger · Accepted Answer · 2012-08-06 14:08:47Z

15

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.

edited Aug 6, 2012 at 14:08

answered Sep 12, 2011 at 14:19

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Comments

SaiKiran Mandhala · Accepted Answer · 2014-04-22 11:27:21Z

2

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');

answered Apr 22, 2014 at 11:27

SaiKiran Mandhala

3653 gold badges15 silver badges38 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 20, 2019 at 0:09

twhitney

3655 silver badges11 bronze badges

Collectives™ on Stack Overflow

Programmatically uncheck jQuery UI checkbox button

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related