未选中 Knockout/Jqm 单选按钮

Posted 2023-05-09

【中文标题】未选中 Knockout/Jqm 单选按钮

【英文标题】：Knockout/Jqm radio button not being checked

【发布时间】：2014-09-25 05:48:11

【问题描述】：

我有这个代码来显示两个单选按钮，供用户选择是或否。

<fieldset data-role="controlgroup">
    <legend>Choose</legend>
    <input type="radio" name="pref" id="radio1" value="yes" data-bind="checked: $root.selected" />
       <label for="radio1">YES</label>
    <input type="radio" name="pref" id="radio2" value="no" data-bind="checked: $root.selected" />
       <label for="radio2">NO</label>
</fieldset>

显示页面时，无论 $root.selected 的值如何（是/否），都不会选中任何单选按钮。经过多次调试，我发现如果我删除标签元素，或者即使我将标签标签更改为 span/div 标签，它也可以工作。

知道为什么没有使用标签检查单选按钮吗？

谢谢。

【问题讨论】：

如果您只是在其中一个末尾的“checked />”处，则选中相应的按钮。

【参考方案1】：

jQM 隐藏原生单选框/复选框并将它们包装在 label 中。 label 接收所有样式以显示为选中。当您将单选框/复选框的 .prop() 更改为 true 或 false 时，您需要手动重新增强 / 刷新元素，$(element).checkboxradio("refresh") .

我不是knockout.js 专家，但以下是实现您想要的示例。

var viewModel = function (status, elm) 
    var self = this;
    self.bar = ko.observable(status ? status.bar : false);
    /* refresh radio/checkbox to re-apply styles */
    self.foo = $(elm).prop("checked", self.bar()).checkboxradio("refresh");
;

ko.applyBindings(new viewModel(
    bar: true
, $("#radio1")));

Demo