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);

例如，如果选择了Admin id 10，则应取消选择其他管理员。

这可能与Knockout有关吗？

Answer 1

如果您只想进行多项选择，则应该使用单选按钮。

但是，如果您仍想使用复选框，那么解决方案就是将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对象。

敲门检查绑定 - 只检查一个

1 个答案: