Enable button if at least one checkbox is selected and with checkbox select all-CodePudding

I have a script that enables a button if at least one checkbox is selected and a checkbox selects all.

The problem is that I can't make it work correctly, when I select the checkbox select all it activates the button but if I uncheck it it is not deactivating.

The delete checkboxes are working correctly the problem is in select all

var checa = document.querySelectorAll(".toggle");
var numElementos = checa.length;
var bt = document.getElementById("btn");
for(var x=0; x<numElementos; x  ){
   checa[x].onclick = function(){
      // "input[name='toggle']:checked" conta os checkbox checados
      var cont = document.querySelectorAll(".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;
   }
}

//---------------------------------------

var roles = {
    checkall: {
        delete: true
    }
};

 $('.role').click(function() {
     var result = {};
     $('.role').each(function() {
         if (!$(this).prop('checked')) return;
         var role = $(this).attr('id');
         $.extend(result, roles[role]);
     });
     $('.perm').each(function() {
         var perm = $(this).attr('id');
         var chk = (perm in result);
         $(this).prop('checked', chk);
     });
 });

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

<div>
<input  type="checkbox" name="toggle" id="checkall"/>Select all
</div>
<hr />
<div >
<input  type="checkbox" name="toggle" id="delete"/>Delete 1
</div>
<div >
<input  type="checkbox" name="toggle" id="delete"/>Delete 2
</div>
<div >
<input  type="checkbox" name="toggle" id="delete"/>Delete 3
</div>
<div >
<input  type="checkbox" name="toggle" id="delete"/>Delete 4
</div>
<div >
<input  type="checkbox" name="toggle" id="delete"/>Delete 5
</div>
<div >
<input  type="checkbox" name="toggle" id="delete"/>Delete 6
</div>
<hr />
<div>
    <button type="button"  id="btn" disabled> Delete selected</button> 
</div>
</div>

CodePudding user response：

the problem is your checkboxes have same ids. change id smt else for each checkbox... like delete1, delete2... what else.

if your id factor is same. js considers it all same. altho

CodePudding user response：

This will work:

var checa = document.querySelectorAll(".toggle");
var numElementos = checa.length;
var bt = document.getElementById("btn");
for (var x = 0; x < numElementos; x  ) {
  checa[x].onclick = function() {
    // "input[name='toggle']:checked" conta os checkbox checados
    var cont = $(".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 > 0 ? false : true;
  }
}

//---------------------------------------

var roles = {
  checkall: {
    delete: true
  }
};

$('.role').click(function() {
  var result = {};
  $('.role').each(function() {
    if (!$(this).prop('checked')) return;
    var role = $(this).attr('id');
    $.extend(result, roles[role]);
  });
  $('.perm').each(function() {
    var perm = $(this).attr('id');
    var chk = (perm in result);
    $(this).prop('checked', chk);
  });
  var cont = $(".toggle:checked").length;
  bt.disabled = cont > 0 ? false : true;
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

  <div>
    <input  type="checkbox" name="toggle" id="checkall" />Select all
  </div>
  <hr />
  <div >
    <input  type="checkbox" name="toggle" id="delete" />Delete 1
  </div>
  <div >
    <input  type="checkbox" name="toggle" id="delete" />Delete 2
  </div>
  <div >
    <input  type="checkbox" name="toggle" id="delete" />Delete 3
  </div>
  <div >
    <input  type="checkbox" name="toggle" id="delete" />Delete 4
  </div>
  <div >
    <input  type="checkbox" name="toggle" id="delete" />Delete 5
  </div>
  <div >
    <input  type="checkbox" name="toggle" id="delete" />Delete 6
  </div>
  <hr />
  <div>
    <button type="button"  id="btn" disabled> Delete selected</button>
  </div>
</div>