如何使用ViewModel连接启用复选框(How to wire up enable on checkbox with ViewModel)

如何使用ViewModel连接启用复选框(How to wire up enable on checkbox with ViewModel)

我只是在学习knockout.js。 经过大量的工作，我得到了这个小型的viewmodel，但是ViewModel的shouldBeEnabled方法看起来很笨重。 有没有更好的方法来绑定它？

我想要实现的是，如果选择了第一个项目，则用户无法选择第三个项目，反之亦然（如果用户已选择第三个项目，则用户无法选择第一个项目。）

看到这个小提琴

<input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType9, 9), checked: reportType9 " />Check 1 <br /> <input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType11, 11), checked: reportType11" />Check 2 <br /> <input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType12, 12), checked: reportType12" />Check 3 function ViewModel() { var self = this; self.reportType9 = ko.observable(false); self.reportType11 = ko.observable(false); self.reportType12 = ko.observable(false); self.shouldBeEnabled = function (isChecked, id) { switch (id) { case 9: if (isChecked()) { self.reportType12(); return true; } else { if (self.reportType12()) { return false; } } return true; break; case 12: if (isChecked()) { self.reportType9(); return true; } else { if (self.reportType9()) { return false; } } return true; default: return true; } }; } $(function () { ko.applyBindings(new ViewModel()); })

I am just learning knockout.js. After much work, I got this small viewmodel working, but the shouldBeEnabled method of the ViewModel seems pretty clunky. Is there a better way to bind this?

What I am trying to achieve is that if the first item is selected, the user cannot select the third item, and vice versa (the user can't select the first item, if he has selected the 3rd.)

See this fiddle

<input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType9, 9), checked: reportType9 " />Check 1 <br /> <input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType11, 11), checked: reportType11" />Check 2 <br /> <input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType12, 12), checked: reportType12" />Check 3 function ViewModel() { var self = this; self.reportType9 = ko.observable(false); self.reportType11 = ko.observable(false); self.reportType12 = ko.observable(false); self.shouldBeEnabled = function (isChecked, id) { switch (id) { case 9: if (isChecked()) { self.reportType12(); return true; } else { if (self.reportType12()) { return false; } } return true; break; case 12: if (isChecked()) { self.reportType9(); return true; } else { if (self.reportType9()) { return false; } } return true; default: return true; } }; } $(function () { ko.applyBindings(new ViewModel()); })

最满意答案

您可以将逻辑放入视图中：

enable: reportType12() === false

现场演示（点击）。

通用示例： 现场演示（单击）。

<input type="checkbox" data-bind="enable: check2() === false, checked: check1" > <label>Check 1</label> <input type="checkbox" data-bind=" enable: check1() === false, checked: check2" > <label>Check 2</label>

You can put the logic right into the view:

enable: reportType12() === false

Live demo (click).

Generic sample: Live demo (click).

<input type="checkbox" data-bind="enable: check2() === false, checked: check1" > <label>Check 1</label> <input type="checkbox" data-bind=" enable: check1() === false, checked: check2" > <label>Check 2</label>