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

Posted 2023-03-27

【中文标题】使用复选框启用/禁用按钮

【英文标题】：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) );

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

提前致谢

【参考方案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 中做到这一点？