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=".12.1/themes/base/jquery-ui.css">
<script src=".12.4.js"></script>
<script src=".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 mands 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?
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./ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://code.jquery./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 mands 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?
Share edited Dec 14, 2016 at 6:26 Ashish Bahl 1,5021 gold badge18 silver badges28 bronze badges asked Dec 14, 2016 at 5:14 wmaddoxwmaddox 1602 silver badges11 bronze badges2 Answers
Reset to default 6I 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./ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
</body>
</html>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();