我是 Knockout 的新手，我正在努力解决以下问题。
我制作了一些可点击的产品 div（带有隐藏的复选框）。如果有人点击一个 div，一个隐藏的复选框会被选中并且样式会改变。
现在我想添加依赖项，因为有些产品不能同时订购。我想根据复选框值（真/假）来执行此操作。因此，假设选择了产品 1，则应使用附加类“disabledDiv”禁用产品 2 和 3。但是，此事件更改活页夹对我没有用。我什至没有发出警报。
self.valueCheckboxChanged = function() {
alert('value has changed')
}
谁能帮帮我，我很茫然。我做了一个简化的 JSFiddle (https://jsfiddle.net/Seabiscuito/f1qnr8a2/) 来说明问题。
【问题讨论】：
标签： jquery checkbox knockout.js knockout-3.0
修复 1： 从复选框中删除 value 绑定。
修复 2： 将 hidden 属性添加到复选框以防止出现任何事件冒泡问题（点击输入会切换值，冒泡到 div 并将其切换回）
修复 3： 订阅复选框的 isChecked observable，而不是使用 change 事件。例如：
self.checkedProducts = ko.pureComputed(function() {
return this.products().filter(function(p) {
return p.isChecked();
});
}, this);
self.checkedProducts.subscribe(function(checked) {
// Do something with the checked products
}, this);
最后一部分是最复杂的部分。确保您不会陷入无限循环！ 如果你解释了你想要创建什么样的依赖，我可以编辑最后一部分以更好地反映你的需求。
这是一个通过subscribe 显示项目之间关系的示例：
function Cart(products) {
this.products = products.map(Product.fromData);
const main = this.products[0];
const others = this.products.slice(1);
main.isChecked.subscribe((included) => {
const action = included
? Product.disable
: Product.enable;
others.forEach(action);
});
};
function Product(name) {
this.name = name;
this.isChecked = ko.observable(false);
this.enabled = ko.observable(true);
};
Product.prototype.toggle = function() {
if (!this.enabled()) return;
this.isChecked(!this.isChecked());
};
Product.prototype.enable = function() {
this.enabled(true);
};
Product.prototype.disable = function() {
this.enabled(false);
this.isChecked(false);
};
Product.enable = p => p.enable();
Product.disable = p => p.disable();
Product.fromData = name => new Product(name);
ko.applyBindings(new Cart(["Deluxe Lunch", "Drink", "Food"]));li { opacity: .5; list-style: none; padding: 1em; border-radius: 3px; border: 1px solid black; margin-bottom: .25em; }
.isChecked { background: yellow }
.isEnabled { opacity: 1; }<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: products">
<li data-bind="click: toggle.bind($data), css: { isChecked: isChecked, isEnabled: enabled }">
<input type="checkbox" data-bind="checked: isChecked" hidden />
<span data-bind="text: name"></span>
</li>
</ul>【讨论】：