javascript - knockout 检查绑定(bind) - 只有一个检查

Question

我有一个带有复选框的管理员列表。我希望只能选择一个管理员。

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 相关吗？

Answer 1

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

但是，如果您仍想使用复选框，那么解决方案是结合 checked 和 click 绑定(bind):

使用 checked 仅在当前 id 等于 selectedAdmin 属性时检查，并使用 click 绑定(bind)设置 selectedAdmin.

所以你的 HTML 应该是这样的:

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

在你的 View 模型中你只需要实现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) 需要将 select 函数中的 this 设置为“parent” viewModel 对象。