如何设置使用 knockout.js 检查的单选按钮？答案

【问题标题】：how to set radio button checked using knockout.js?如何设置使用 knockout.js 检查的单选按钮？
【发布时间】：2013-05-22 22:22:04
【问题描述】：

我有两个单选按钮。

<td>
    <div style="display: inline; margin-right: 10px">
         <input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal/>US
    </div>
    <div style="display: inline">
         <input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal"/>Global
    </div>
</td>

我正在像这样填充我的模型

QuestionnaireModel = function (data) {
  self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal : false);
}

该值完全来自 DB，并且在 self.IsGlobal 中填充为真/假。基于这个真/假，我想设置我的单选按钮。

【问题讨论】：

您的问题是什么？此外，您还有一个语法错误：在第一个“checked:IsGlobal”之后缺少引号。
我更正了。感谢您报告语法错误。

标签： asp.net-mvc knockout.js

【解决方案1】：

checked binding 对单选按钮的作用不同：

对于单选按钮，当且仅当参数值等于单选按钮节点的 value 属性时，KO 会将元素设置为检查。所以，你的参数值应该是一个字符串。

所以您的IsGlobal 应该包含一个字符串，并且您需要具有与单选按钮的值相同的字符串：

<input type="radio" name="USGlobalUser" 
       data-bind="checked: IsGlobalCheckbox" value="false" />US
<input type="radio" name="USGlobalUser" 
       data-bind="checked: IsGlobalCheckbox" value="true" />Global

在您的视图模型中：

self.IsGlobal = ko.observable(data ? data.IsGlobal + "" : "false");

如果您想保留 IsGlobal 来存储布尔值，您需要为进行转换的单选按钮创建一个新的计算属性：

self.IsGlobalCheckbox = ko.computed({
    read: function() {
        return self.IsGlobal() + "";
    },
    write: function (v) {
        if (v == "true") self.IsGlobal(true)
        else self.IsGlobal(false)
    }
});

演示JSFIddle.

顺便说一句，正如 Tomas 所说，您的绑定系统税在您的示例中被破坏了。

【讨论】：

这在 Knockout 3.3 中仍然准确吗？
@alex 是的，检查的绑定在 Knockout 3.3 中的工作方式相同

【解决方案2】：

来自数据库的值是布尔值 True/False

我改变了视图模型：

self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal.toString() : "");

在cshtml中：

<td>
    <div style="display: inline; margin-right: 10px">
       <input type="radio" name="USGlobalUser" value="false" data-bind="checked:IsGlobal()" />US                         
    </div>
    <div style="display: inline">
       <input type="radio"  name="USGlobalUser" value="true" data-bind="checked:IsGlobal()" />Global
    </div>
</td>

【讨论】：

【解决方案3】：

这要简单得多。如果您想在附加到单选按钮的 observable 中存储与字符串不同的内容，只需将每个单选按钮的 checkedValue 绑定设置为与 html 元素相同的值。

<div style="display: inline; margin-right: 10px">
    <input type="radio" name="USGlobalUser" data-bind="checked: IsGlobal, checkedValue: false" value="false" />US</div>
<div style="display: inline">
    <input type="radio" name="USGlobalUser" data-bind="checked: IsGlobal, checkedValue: true" value="true" />Global</div>
var QuestionnaireModel = function (data) {
    var self = this;
    self.IsGlobal = ko.observable(data ? data.IsGlobal : false);
}

ko.applyBindings(new QuestionnaireModel({
    IsGlobal: true
}))

【讨论】：

【解决方案4】：

data-bind 之后的属性应该是等号而不是冒号。

<input type="radio" name="USGlobalUser" data-bind="checked:IsGlobal"/>

【讨论】：