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

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

你可以

1. 为另一个复选框添加另一个可观察对象

2. 为按钮添加一个计算的可观察值，只有当两个复选框都被选中时才返回真（可观察值是真的）

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 {

  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>