Enable/Disable a button if at least one checkbox is checked

Asked

Viewed 1,899 times

2

I am trying to enable a button if at least one of the six checkbox is enabled, and disable any checkbox is enabled. I made a function, but it only enables and does not disable if I uncheck all checkboxes. Help me, please.

<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>

Function

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");
} }
javascript html

  • Your page has jquery library?

1 answer

2


You can do it in a simpler way without having to use onclick in each checkbox. Using document.querySelectorAll you can check if there are any selected and enable the button, otherwise disable. You can use the event onclick in the code that picks up the clicks in all checkbox at once. Remove all 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>

You can use jQuery as well:

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

  • Thank you very much!! Gave it right here!

  • I put in the answer a solution using jQuery. See that it is much simpler.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.