How to Check/Uncheck jquery-ui checkboxradio programatically

Question

I am trying to check/uncheck a jquery-ui checkboxradio widget programatically (i.e. without using the mouse). I've tried all manner of things but not joy. To reproduce the issue, choose a blank html page with just jquery and jquery-ui script tags and then create the widget dynamically:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blank</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
</body>
</html>

After the page loads, I hit F12 to bring up dev-tools and enter the following commands to get a minimal jquery-ui checkbox:

$container = $("<div>")
$container.append($("<label for='chkbox'>"))
$container.append($("<input type='checkbox' id='chkbox'>"))
$container.appendTo('body')
$('#chkbox').checkboxradio()

The checkbox is unchecked by default. Lets try to check it:

$('#chkbox').attr('checked', true) // nope
$('#chkbox').checkboxradio('refresh') // nope
$('#chkbox').attr('checked', false)
$('#chkbox').prop('checked', true) // nope
$('#chkbox').prop('checked', false)
$('#chkbox').addClass('ui-checkboxradio-checked') // not this either
$('#chkbox').removeClass('ui-checkboxradio-checked')
$('#chkbox').checkboxradio('option', 'classes.ui-checkboxradio-checked', true) // does nothing
$('#chkbox').checkboxradio('option', 'ui-checkboxradio-checked', true) // does nothing
$('#chkbox').checkboxradio('option', 'classes.ui-checkboxradio.ui-checkboxradio-checked', true) // and again, nothing...

This is irritating. Does anyone have a solution to this seemingly simple problem?

Lalji Dhameliya · Accepted Answer · 2023-04-10 06:49:51Z

6

I hope it should be help you thanks.

$container = $("<div>")
$container.append($("<label for='chkbox'>"))
$container.append($("<input type='checkbox' id='chkbox' >"))
$container.appendTo("body")
 $("#chkbox").checkboxradio();
$("#chkbox").prop("checked",true).checkboxradio("refresh")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blank</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
</body>
</html>

edited Apr 10, 2023 at 6:49

answered Dec 14, 2016 at 5:41

Lalji Dhameliya

1,7791 gold badge19 silver badges27 bronze badges

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

1 Comment

Nightwolf Over a year ago

Any reason why you do not have consistency in your apostrophe? The HTML portion has double apostrophe for attributes, yet the generated HTML from JQuery has single apostrophe.

Mairaj Ahmad · Accepted Answer · 2016-12-14 05:18:54Z

3

You need to call change function as jquery ui will change the visual effect on change so only settiing the checked property wont take any effect

$("#chkbox").attr("checked","checked").change();

answered Dec 14, 2016 at 5:18

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

1 Comment

Sergey Over a year ago

There is refresh() method for that widget. Also, jQuery specs says that you shoud use prop() method for setting properties like checked, selected, or disabled

Collectives™ on Stack Overflow

How to Check/Uncheck jquery-ui checkboxradio programatically

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related