多个复选框状态已选中

Posted 2023-03-27

【中文标题】多个复选框状态已选中

【英文标题】：Multiple checkboxes state checked

【发布时间】：2020-12-28 11:00:06

【问题描述】：

我正在使用淘汰赛 Js。有两个复选框。如果未选中任何复选框，则提交按钮将被禁用。可能会有 1 个复选框而不是 2 个复选框。所以我有这样的条件

 if ((self.checkBox1() === true && self.checkBox2() === true) || ($("#checkbox2").length <= 0 && self.checkBox1() === true) || ($("#checkbox1").length <= 0 && self.checkBox2() === true)) 
        $('.submit-btn').attr('disabled', false);

     else 
        $('.submit-btn').attr('disabled', true);

    
    return true;

这是我创建的Jsfiddle 示例。

有更好的方法吗？

【问题讨论】：

您是否显示 1 个复选框或 2 个复选框，它们的当前状态，提交按钮的当前状态等。所有这些都应该是您的 VM 的可观察/计算属性。否则，使用 Knockout JS 毫无意义。

那么在 Knockout JS @Delphi.Boy 中这样做的权利是什么

【参考方案1】：

这样的事情会是一个好的开始。

var ViewModel = function() 
  var self = this;
  self.checkBox1 = ko.observable(false);
  self.checkBox2 = ko.observable(false);
  self.submitEnabled = ko.pureComputed(function()
    return self.checkBox1() && self.checkBox2();
  );
  self.submitForm = function()
    alert("Woohoo, I can submit!!");
  
;

ko.applyBindings(new ViewModel());

h3 
  font-size: 120%;
  font-weight: bold;
  margin-top: 5px;


#bookform 
  margin: 10px;
  padding: 20px 20px 25px 20px;
  background-color: #eee;


input 
  width: 100%;
  padding: 4px;


.button 
  margin: 12px 0 0 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="bookform">
  <input type="checkbox" id="checkbox1" data-bind="checked: checkBox1"> Checkbox 1
  <input type="checkbox" id="checkbox2" data-bind="checked: checkBox2">Checkbox 2
  <button type="button" id="myBtn" class="btn btn-primary submit-btn" data-bind="click: submitForm, enable: submitEnabled">Submit</button>
</div>

【参考方案2】：

$('.submit-btn').attr('disabled', ![...document.querySelectorAll('[type="checkbox"]')].every(cb=cb.checked)));

在这种情况下，我们正在检查页面上的所有复选框是否都被选中，这是一个返回 true/false 的过程，并使用该值直接更改按钮上的禁用状态。

如果同一页面上也存在非必需复选框的可能性，则对 querySelectorAll('[type="checkbox"]') 部分进行小幅改动即可解决问题：为所需的 CB 提供 class="required" (querySelectorAll('.required[type="checkbox"]')，或将其作为目标父容器 (querySelectorAll('#parent [type="checkbox"]'

【讨论】：

我想使用 knockoutJS @NerdyDeeds