0

Pessoal tenho esse input:

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

Tenho um grid que é preenchido e cada linha tem um checkbox:

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

Tenho esse script que ao clicar apenas no 1º checkbox do Grid ele habilita e desabilita, do 2º em diante ele não funciona:

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

Preciso que ele fique enabled quando uma quantidade x 'vai vir de uma consulta mysql' de checkbox for selecionada e quando desmarcar 1 do total ela volte para disabled.

2
  • oi, tente complementar seu código o mais possível do resultado, com o restante do html para realizar um teste, se possível disponibilize seu código dentro do snippet no editor de pergunta.
    – ElvisP
    Commented 12/03/2020 às 14:23
  • olá, o resto para complementar seria html sem importância. Commented 12/03/2020 às 14:36

1 Resposta 1

2

Você está repetindo o id="seleciona", e com isso o JavaScript irá sempre buscar o primeiro que achar. Por isso o change só funciona no primeiro checkbox.

Um id deve ser único na página, não pode ser repetido.

Se você quer habilitar o input somente quando um número mínimo determinado forem marcados, basta comparar esse número com a quantidade que foi marcada. Se a quantidade marcada for igual ou maior que o mínimo, habilita o input, se for menor, desabilita.

O número mínimo a ser marcado você pode colocar num atributo data-* no input #cadastrar:

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

Para fazer isso nem precisa de id's, basta selecionar os elementos pelo name, já que todos possuem o mesmo:

$(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" />

5
  • Perfeito @Sam, era exatamente o que queria, mas surgiu outra dúvida como levaria o total de checks a ser marcado vindo de um select no mysql? Commented 12/03/2020 às 17:21
  • Como assim? Não entendi.
    – Sam
    Commented 12/03/2020 às 17:27
  • O total de check's a ser marcado não vai ser o total que está na tela, no seu ex: 3, vão ser uns 30 a 50 checks no grid, dai vou ter um select que vai retornar um valor e esse valor é quantidade a ser marcada para habilitar o input. ao invés de ser var total = $(":checkbox[name='seleciona[]']").length;, teria que ser algo assim: var total = $variavel['quatidade']; Commented 12/03/2020 às 17:30
  • Alterei a resposta. Veja se era isso.
    – Sam
    Commented 12/03/2020 às 17:48
  • Era isso mesmo, show de bola, vlw. Commented 12/03/2020 às 17:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .