单击复选框动态更新多个可观察对象

Question

我有 a scenario in which 我有多个复选框，对于每个复选框，只要选中任何其他复选框，所有其他复选框的值都应该更改（并且它们相应的可观察值应该更新）为 false .基本上，复选框的行为应类似于单选按钮，但每个复选框都绑定到一个数据库字段。

<input type="checkbox" data-bind="checked: NameIsJohn">John</input>
<input type="checkbox" data-bind="checked: NameIsJerry">Jerry</input>
<input type="checkbox" data-bind="checked: NameIsJenny">Jenny</input>
<input type="checkbox" data-bind="checked: NameIsJake">Jake</input>
<input type="checkbox" data-bind="checked: NameIsJeffrey">Jeffrey</input>
<input type="checkbox" data-bind="checked: NameIsJack">Jack</input>

var vm = function() {
    this.NameIsJohn = ko.observable();
    this.NameIsJerry = ko.observable(true);
    this.NameIsJenny = ko.observable();
    this.NameIsJake = ko.observable();
    this.NameIsJeffrey = ko.observable();
    this.NameIsJack = ko.observable();   
};

一种方法是使用 jQuery 将点击处理程序附加到每个复选框，但这似乎不会更新底层的可观察对象。

//var variable = the input element
$variable.filter(':checked').not(this).removeAttr('checked');

另一种方法是使用自定义 Knockout 函数或某种自定义订阅。我的想法有效，但它很老套。想象一下，如果有 10 个或更多 observables 要更新！

vm.ChangeCheckbox = function (CheckboxName) {
                vm.NameIsJohn(false);
                vm.NameIsJerry(false);
                vm.NameIsJenny(false);
                vm.NameIsJake(false);
                vm.NameIsJohn(false);
                vm.NameIsJohn(false);
                if (CheckboxName === 'John') {
                    vm.NameIsJohn(true);
                }   else if (CheckboxName === 'Jerry') {
                    vm.NameIsJerry(true);
                } ...
//etc.

是否有更动态的方式来在单击复选框时更新此集合中的所有可观察对象？

Answer 1

我觉得有一个变量来指示哪个是选中的框是明智的——你可以在单击时设置它——并且所有按钮的选中属性都附加到计算的可观察对象，其功能基本上是 "am I the one?"

this.NameIsJohn = ko.computed(isIt('John'));

单击复选框动态更新多个可观察对象

Dynamically updating multiple observables on checkbox click

jquery

knockout.js