javascript-敲除选中的绑定-仅选中一项

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

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,则应取消选择其他管理员.

淘汰赛有可能吗？

解决方法:

如果只想允许多个选择,则应该真正使用单选按钮.

但是,如果您仍要使用复选框,那么解决方案是将选中和单击绑定结合在一起：

仅当当前ID等于selectedAdmin属性时,才使用选中的复选框进行检查,并使用单击绑定来设置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.

笔记：

>返回true；在选择功能的末尾.在这种情况下,触发浏览器默认行为是必需的,以选中该复选框.
>需要.bind($parent)才能将select函数中的this设置为“ parent” viewModel对象.

标签：knockout-js,javascript
来源： https://codeday.me/bug/20191122/2058030.html