启用按钮，如果至少选中一个复选框，并使用复选框全选

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

这将起作用：

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>

Answer 2

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

如果你的身份因素相同。Javascript认为这一切都是一样的。虽然