Question

我正在尝试以编程方式检查/取消选中jquery-ui checkboxradio窗口小部件（即不使用鼠标）。我尝试过各种各样的事情而不是快乐。要重现此问题，请选择仅包含jquery和jquery-ui脚本标记的空白html页面，然后动态创建小部件：

<!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>

页面加载后，我点击F12调出dev-tools并输入以下命令以获得最小jquery-ui复选框：

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

默认情况下取消选中该复选框。让我们试试看：

$('#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...

这太刺激了。有没有人能解决这个看似简单的问题？

Answer 1

您需要调用change函数，因为jquery ui会更改对更改的视觉效果，因此仅设置checked属性不会产生任何影响

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

Answer 2

我希望它应该对你有所帮助。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

如何以编程方式检查/取消选中jquery-ui checkboxradio

2 个答案: