Как запретить нажатии на submit, пока не будут установлены все чекбоксы?

Question

[Alex_87]

Здравствуйте Проблема заключается в том, что проверить нужно не один чекбокс, а несколько. И только в этом случае разрешить нажатие на кнопку submit. подскажите пожалуйста, как лучше это сделать?

<form class="form-check">
     <input  type="checkbox" id="check1" />
     <input  type="checkbox" id="check2" />
     <input  type="checkbox" id="check3" />
      
    <button type="submit" class="btn btn-primary" disabled="disabled" id="submit">Next</button>
</form>

Answer 1

[hzzzzl]

сравнить количество 'input:checked' с количеством инпутов в форме

Comments

[Alex_87]

а если я в одной форме использую 2 блока, и виден только один блок. В каждом блоке по 3 чекбокса и только их нужно проверять, что тогда делать? Я попробовал так...

<form class="form-check" id="side1">
  <div class="side1">
    <input type="checkbox" id="check1" />
    <input type="checkbox" id="check2" />
    <input type="checkbox" id="check3" />
  </div>
  <div class="side2">
    <input type="checkbox" id="check1" />
    <input type="checkbox" id="check2" />
    <input type="checkbox" id="check3" />
  </div>
  
  <button type="submit" class="btn btn-primary" disabled="disabled" id="submit">Next</button>
</form>

side1.onclick = () => {
  const checked = side1.querySelectorAll('input:checked').length
  const boxes = side1.querySelectorAll('input[type=checkbox]').length
  submit.disabled = (checked !== boxes)
}

side2.onclick = () => {
  const checked = side2.querySelectorAll('input:checked').length
  const boxes = side2.querySelectorAll('input[type=checkbox]').length
  submit.disabled = (checked !== boxes)
}

[Alex_87]

Решил, спасибо!

_side1.onclick = () => {
  const checked = _side1.querySelectorAll('input:checked').length
  const boxes = _side1.querySelectorAll('input[type=checkbox]').length
  submit.disabled = (checked !== boxes)
}

_side2.onclick = () => {
  const checked = _side2.querySelectorAll('input:checked').length
  const boxes = _side2.querySelectorAll('input[type=checkbox]').length
  submit.disabled = (checked !== boxes)
}

Answer 2

[cython]

<form class="form-check">
     <input  type="checkbox" id="check1" required/>
     <input  type="checkbox" id="check2" required/>
     <input  type="checkbox" id="check3" required/>
      
    <button type="submit" class="btn btn-primary" disabled="disabled" id="submit">Next</button>
</form>

Answer 3

[Евгений]

$(document).ready(function() {
    $('form').on('submit', check);
});

function check() {
    return $('#test').is(':checked');
}