如果至少选中了一个复选框并且带有复选框 select 全部，则启用按钮

Question

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container card m-4 p-3"> <div> <input class="role toggle me-2" type="checkbox" name="toggle" id="checkall"/>Select all </div> <hr /> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete"/>Delete 1 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete"/>Delete 2 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete"/>Delete 3 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete"/>Delete 4 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete"/>Delete 5 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete"/>Delete 6 </div> <hr /> <div> <button type="button" class="btn btn-danger btn-sm" id="btn" disabled> Delete selected</button> </div> </div>

Answer 1

The problem is your checkboxes have the same id's. Change id to something else for each checkbox... like delete1, delete2... what else.

If your id factor is the same. Javascript considers it all same. Although...

Answer 2

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container card m-4 p-3"> <div> <input class="role toggle me-2" type="checkbox" name="toggle" id="checkall" />Select all </div> <hr /> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete" />Delete 1 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete" />Delete 2 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete" />Delete 3 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete" />Delete 4 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete" />Delete 5 </div> <div class="mb-1"> <input class="perm toggle me-2" type="checkbox" name="toggle" id="delete" />Delete 6 </div> <hr /> <div> <button type="button" class="btn btn-danger btn-sm" id="btn" disabled> Delete selected</button> </div> </div>