Enable/Disable 使用复选框的按钮

Question

如果两个复选框都被选中，我需要 enable/disable 按钮。我想在 knockout.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) });

如有任何帮助或建议，我们将不胜感激。

提前致谢

Answer 1

您只能使用 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>

Answer 2

你可以

为另一个复选框添加另一个 observable
为按钮添加一个 computed observable，returns 只有当两个复选框都被选中时才为真（可观察到的为真）

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>

Enable/Disable 使用复选框的按钮

Enable/Disable button using checkboxes

javascript

knockout.js

knockout-validation

knockout-3.0

knockout-mvc