如果至少选中了一个复选框，则启用按钮，然后使用复选框选择“全部”。

Question

我有一个脚本，如果至少选中一个复选框，并且复选框选择所有，则启用一个按钮。

问题是，我不能使它正确工作，当我选择复选框，选择所有它激活按钮，但如果我取消它，它不是停用。

删除复选框工作正常，问题在“选择所有”中。

​

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

问题是您的复选框具有相同的id。请将每个复选框的id更改为其他。比如delete1，delete2..。还有什么。

如果你的身份因素是一样的。Javascript认为这一切都一样。尽管..。

Answer 2

这将起作用：

​

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>

​