如何使用knockout.js设置单选按钮?

Nay*_*han 5 asp.net-mvc knockout.js

我有两个单选按钮.

<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>
Run Code Online (Sandbox Code Playgroud)

我像这样填充我的模型

QuestionnaireModel = function (data) {
  self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal : false);
}
Run Code Online (Sandbox Code Playgroud)

价值完全来自DB,它在self.IsGlobal中填充为true/false.根据这个真/假,我想设置我的单选按钮.

nem*_*esv 13

检查结合的作品不同的单选按钮:

对于单选按钮,当且仅当参数值等于单选按钮节点的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
Run Code Online (Sandbox Code Playgroud)

并在您的viewmodel中:

self.IsGlobal = ko.observable(data ? data.IsGlobal + "" : "false");
Run Code Online (Sandbox Code Playgroud)

如果要保留IsGlobal存储布尔值,则需要为执行转换的单选按钮创建新的计算属性:

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

演示JSFIddle.

顺便提一下,Tomas注意到你的样本中的绑定systax被破坏了.