Проверено состояние нескольких флажков

#javascript #checkbox #knockout.js #knockout-validation #knockout-3.0

#javascript #флажок #knockout.js #проверка нокаута #нокаут-3.0

Вопрос:

Я использую knockout Js. Есть два флажка. Если какой-либо флажок не установлен, то кнопка отправки будет отключена. Могут быть случаи, когда вместо 2 флажков будет 1 флажок. Итак, у меня такое состояние

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

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

    }
    return true;
}

Это образец Jsfiddle, который я создал.

Есть ли лучший способ сделать это?

1. Показываете ли вы 1 флажок или 2 флажка, их текущее состояние, текущий статус кнопки отправки и т.д. все они должны быть наблюдаемыми / вычисляемыми свойствами вашей виртуальной машины. В противном случае нет смысла использовать Knockout JS.

2. так что правильно делать это в 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() amp;amp; 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"]'