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

Question

如果两个复选框都被选中，我需要启用/禁用按钮。我想在 knockout.js 中做。我还是个初学者。我找到了一个使用复选框启用/禁用按钮的示例，但这是针对 1 个复选框执行的。在我的场景中，我有两个复选框，应该选中它们以启用按钮。如果未选中任何复选框，则应禁用该按钮。

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

<button data-bind="enable: myBoolean">My Button</button>

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

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

提前致谢

Answer 1

你可以为另一个复选框添加另一个可观察对象为按钮添加一个计算的可观察值，只有当两个复选框都被选中时才返回真（可观察值是真的）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>

Answer 2

您只能使用 CSS 来完成此操作。除非你需要支持 IE10 或更低版本。button {&nbsp; cursor: not-allowed;&nbsp; pointer-events: none;&nbsp; color: grey;&nbsp; background-color: white;}#firstCheckbox:checked+#secondCheckbox:checked+button {&nbsp; color: black;&nbsp; cursor: pointer;&nbsp; pointer-events: auto;}<input type="checkbox" id="firstCheckbox"><input type="checkbox" id="secondCheckbox"><button>Click me</button>