选中多个复选框状态

问题描述

我正在使用淘汰赛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样本。

有更好的方法吗？

解决方法

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

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

如果也有可能在同一页面上也存在非必需的复选框，则对querySelectorAll('[type="checkbox"]')部分进行较小的改动就可以解决：给所需的CB赋予class="required"（{{1} }），或定位其父容器（querySelectorAll('.required[type="checkbox"]'

,

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

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>