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

【问题标题】：Enable/Disable button using checkboxes使用复选框启用/禁用按钮
【发布时间】：2020-12-28 13:36:35
【问题描述】：

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

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

提前致谢

【问题讨论】：

标签： javascript knockout.js knockout-validation knockout-3.0 knockout-mvc

【解决方案1】：

你可以

为另一个复选框添加另一个 observable
为按钮添加一个computed observable，只有当两个复选框都被选中时才返回true（observables为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>

【讨论】：

感谢菲利普，这正是我想要的。有没有办法可以检查 myBoolean1 或 myBoolean2 是否存在。可能存在只有 1 个复选框的情况
在这种情况下，您应该创建一个对象和 html，就像您在问题中所写的那样。

【解决方案2】：

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

【讨论】：

有没有办法在 Knockout.js 中做到这一点？