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>