使用复选框启用/禁用按钮

如何解决使用复选框启用/禁用按钮

如果同时选中了两个复选框，则需要启用/禁用按钮。我想在ockout.js中做。我还是一个初学者。我找到了一个示例enable/disable button using checkbox，但是它只用于1个复选框。在我的方案中，我有两个复选框，应选中两个复选框以启用该按钮。如果未选中任何复选框，则应禁用该按钮。

<input type="checkBox" data-bind="checked: myBoolean" />
<button data-bind="enable: myBoolean">My Button</button>

ko.applyBindings({ myBoolean: ko.observable(true) });

任何帮助或建议将不胜感激。

预先感谢

解决方法

您可以

1. 为另一个复选框添加另一个可观察项
2. 为按钮添加computed observable，仅当两个复选框都被选中（可观察性为true时）才返回true。

var test = { 
  myBoolean1: ko.observable(false),myBoolean2: ko.observable(false)
};
test.myComputed = ko.computed(function() { return test.myBoolean1() && test.myBoolean2() });

ko.applyBindings(test);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="checkbox" data-bind="checked: myBoolean1" />
<input type="checkbox" data-bind="checked: myBoolean2" />
<button data-bind="enable: myComputed">My Button</button>

,

您只能使用CSS进行此操作。除非您需要支持IE10或更低版本。

button {
  cursor: not-allowed;
  pointer-events: none;
  color: grey;
  background-color: white;
}

#firstCheckbox:checked+#secondCheckbox:checked+button {
  color: black;
  cursor: pointer;
  pointer-events: auto;
}

<input type="checkbox" id="firstCheckbox">
<input type="checkbox" id="secondCheckbox">
<button>Click me</button>