2

Estou tentando habilitar um botão se pelo menos um dos seis checkbox for habilitado, e desabilitar de nenhum checkbox estiver habilitado. Fiz uma função, mas ela só habilita e não desabilita caso eu desmarque todos os checkbox. Me ajudem, por favor.

<html>
<head>
<title></title>
</head>
<body>
<div id= "consulta0" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle" onclick="ativar()">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta1" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle" onclick="ativar()">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta2" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle" onclick="ativar()">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta3" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle" onclick="ativar()">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta4" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle" onclick="ativar()">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta5" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle" onclick="ativar()">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>

<div class=" item1">
    <button type="button" class="btn btn-success" id="aplica" onclick="checar()" disabled> Aplicar</button> 
</div>
</body>
</html>

Função

function ativar(){

var checa = document.getElementsByName("toggle");
var bt = document.getElementById("aplica");

 var numElementos = checa.length;
 var i = 0;
 var cont =0;

for(i=0; i<= numElementos; ++i){

    if(checa[i] !== undefined){
        ++cont;
    }
}

if(cont >=1){
    document.getElementById("aplica").removeAttribute("disabled");
}
else{
    document.getElementById("aplica").setAttribute("disabled");
} }
1
  • Sua pagina tem biblioteca jquery?
    – user60252
    17/06/2018 às 21:22

1 Resposta 1

2

Pode fazer de uma forma mais simples sem ter que usar onclick em cada checkbox. Usando document.querySelectorAll você pode verificar se há algum selecionado e habilitar o botão, caso contrário, desabilitar. Você pode usar o evento onclick no código que pega os cliques em todos os checkbox de uma vez. Remova todos os onclick="ativar()".

var checa = document.getElementsByName("toggle");
var numElementos = checa.length;
var bt = document.getElementById("aplica");
for(var x=0; x<numElementos; x++){
   checa[x].onclick = function(){
      // "input[name='toggle']:checked" conta os checkbox checados
      var cont = document.querySelectorAll("input[name='toggle']:checked").length;
      // ternário que verifica se há algum checado.
      // se não há, retorna 0 (false), logo desabilita o botão
      bt.disabled = cont ? false : true;
   }
}
<div id= "consulta0" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta1" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta2" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta3" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta4" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta5" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>

<div class=" item1">
    <button type="button" class="btn btn-success" id="aplica" onclick="checar()" disabled> Aplicar</button> 
</div>

Pode usar jQuery também:

$("[name='toggle']").click(function(){
   var cont = $("[name='toggle']:checked").length;
   $("#aplica").prop("disabled", cont ? false : true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id= "consulta0" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta1" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta2" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta3" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta4" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>
<div id= "consulta5" class="toggle div-inline"  align="center"> 
    <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo" name="toggle">
    <p class= "nomeToogle"> Consultar Acervos</p>
</div>

<div class=" item1">
    <button type="button" class="btn btn-success" id="aplica" onclick="checar()" disabled> Aplicar</button> 
</div>

2
  • Muito Obrigada!! Deu certinho aqui!
    – MStos
    17/06/2018 às 21:21
  • Coloquei na resposta uma solução usando jQuery. Veja que fica bem mais simples.
    – Meu ovo
    17/06/2018 às 21:26

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 .