淘汰赛检查绑定 - 只有一个检查

我有一个管理员与一个复选框的列表。我希望能够只选择一个管理员。淘汰赛检查绑定 - 只有一个检查

HTML：

<tbody data-bind="foreach: people"> 
<tr> 
<td> 
    <input type="checkbox" data-bind="attr: { value: id }, checked: $root.selectedAdmin"> 
    <span data-bind="text: name"/> 
</td> 
</tr> 
</tbody

JS：

function Admin(id, name) { 
    this.id = id; 
    this.name = name; 
} 

var listOfAdmin = [ 
new Admin(10, 'Wendy'), 
new Admin(20, 'Rishi'), 
new Admin(30, 'Christian')]; 

var viewModel = { 
    people: ko.observableArray(listOfAdmin), 
    selectedAdmin: ko.observableArray() 
}; 

ko.applyBindings(viewModel);

例如，如果管理员ID 10被选择的其他管理员应当取消选择。

这可能与Knockout有关吗？

来源

2014-01-20 devgen

如果您只想选择一个项目，为什么不使用单选按钮而不使用复选框？ – nemesv

我尝试使用单选按钮，但我不知道如何只能检查行列表中的一个 – devgen

如果您只想允许多项选择，您应该真的使用单选按钮。

不过，如果你仍然想使用复选框，然后在解决方案是结合checked和click结合：

使用checked检查，只有当电流id等于selectedAdmin财产和使用click结合设置为selectedAdmin。

所以，你应该HTML是这样的：

<input type="checkbox" data-bind="attr: { value: id }, 
            checked: $root.selectedAdmin() == id, 
            click: $parent.select.bind($parent)" />

并在您的视图模型，你只需要实现select功能：

var viewModel = { 
    people: ko.observableArray(listOfAdmin), 
    selectedAdmin: ko.observableArray(), 
    select: function(data) { 
     this.selectedAdmin(data.id); 
     return true; 
    } 
};

演示JSFiddle。

注：

的return true;在select函数的末尾。在这种情况下，这需要触发浏览器的默认行为来检查复选框。
的.bind($parent)需要设置this在select函数为“父” viewModel对象。

来源

2014-01-20 20:07:08 nemesv

淘汰赛检查绑定 - 只有一个检查

回答

相关问题