knockout.js 中的复选框逻辑

Question

我有两个复选框，我想实现以下逻辑：

如果两者都关闭，则允许，如果一个复选框打开，如果另一个要打开（选中），则第一个必须切换到关闭，反之亦然

如何使用 html 和 ko.js 执行此操作？

这是我得到的用于切换的代码：

var viewmodel = function(){
  var self = this;
  self.checkA = ko.observable(true);
  self.checkB = ko.pureComputed({
    read: function(){
      return !self.checkA()
    },
    write: function(value){
      value? self.checkA(false) : self.checkA(true);
    },
    owner: self
  });
};

ko.applyBindings(新视图模型());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

A
<input type="checkbox" data-bind="checked: checkA" />

B
<input type="checkbox" data-bind="checked: checkB" />

Answer 1

由于 B 的值不仅仅是 A 值的函数（两者都可能为假），因此您必须有第二个可观察对象来独立存储其状态。然后，对于您的逻辑，我建议使用 ko.subscribe 而不是计算函数来对任一值的更改做出反应。

var viewmodel = function() {
  var self = this;
  self.checkA = ko.observable(true);
  self.checkB = ko.observable(false);

  self.checkA.subscribe(function(value) {
    if (value) self.checkB(false); //also clear B
  });

  self.checkB.subscribe(function(value) {
    if (value) self.checkA(false); //also clear A
  });
};

ko.applyBindings(new viewmodel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

A <input type="checkbox" data-bind="checked: checkA" /> 
B <input type="checkbox" data-bind="checked: checkB" />

knockout.js 中的复选框逻辑

Checkbox Logic in knockout.js

html

javascript

knockout.js