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

Question

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

Navigation

#1 by (2 votes)

2

I'm trying to enable a button if at least one of the six checkboxes is enabled, and disable from any checkbox is enabled. I did a function, but it only enables and does not disable if I uncheck all the 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

asked by anonymous 17.06.2018 / 22:28

1 answer

Initialize and change static variable in a safe way. Does this code make sense? Intellij IDEA thinks it does not Fix JButton that is running 2 events

score 2 · Accepted Answer

You can do this 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 button, otherwise disable. You can use the onclick event in the code that takes the clicks on all checkbox at one time. 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 too:

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