Enable input when arriving at selected checkbox amount

Question

Guys I got this input:

<input type="submit" id="cadastrar" value="Cadastrar" disabled>

I have a grid that is filled and each line has one checkbox:

<td>
    <input type="checkbox" id="seleciona" name="seleciona[]" value= <=$row_questao['codprova'] ?>" />
</td>

I have this script that when I click only on the first checkbox from Grid it enables and disables, from 2nd onwards it does not work:

$(document).ready(function () {
  $("#seleciona").on('change', function () {
    if ($(this).is(':checked')) {
      $("#cadastrar").prop('disabled', false);
    } else {
      $("#cadastrar").prop('disabled', true);
    }
  });
});

I need him to stay enabled when a quantity x will come from a mysql query checkbox is selected and when you deselect 1 of the total it returns to disabled.

Answer 1

You are repeating the id="seleciona", and with this Javascript will always find the first one it finds. So change only works in the first checkbox.

An id must be unique on the page, it cannot be repeated.

If you want to enable input only when a given minimum number is marked, just compare that number with the quantity that has been marked. If the quantity marked is equal to or greater than the minimum, enables the input, if it is smaller, disable.

The minimum number to be marked you can put in an attribute data-* in the input #register:

<input type="submit" data-min="2" id="cadastrar" value="Cadastrar" disabled>
                         ↑

To do this you don’t even need id’s, simply select the elements by name, since everyone has the same:

$(function(){

   $(":checkbox[name='seleciona[]']").on("change", function(){
      // pega o valor mínimo
      var minimo = $("#cadastrar").data("min");
      // conta quantos foram marcados
      var marcados = $(":checkbox[name='seleciona[]']:checked").length;
      
      $("#cadastrar").prop("disabled", marcados >= minimo ? false : true );
      
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" data-min="2" id="cadastrar" value="Cadastrar" disabled>
<br>
Marque pelo menos 2 checkbox para habilitar o campo acima:
<br>
<input type="checkbox" name="seleciona[]" value="a" />
<input type="checkbox" name="seleciona[]" value="b" />
<input type="checkbox" name="seleciona[]" value="c" />