Problema: Desabilitar os outros checkboxes ao selecionar uma certa quantidade deles.
Passos:
- contar a quantidade de checkboxes selecionados;
- verificar no load da página se já tem 2 checks marcados;
- somar ou subtrair conforme for clicando nos checkboxes;
- se a quantidade de checks marcados for igual a 2, então desabilita todos os outros;
- caso contrário(se quantidade de checks selecionados for menor que 2), então os outros devem perder o disabled
Essa é a rotina inclusive para fazer a ida e volta do script. Verificar somando e subtraindo caso o cara tire o checked do checkbox.
Solução
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>label { display: block; }</style>
<script type="text/javascript">
(function(){
"use strict";
var marcados = 0;
var verifyCheckeds = function($checks) {
if( marcados>=2 ) {
loop($checks, function($element) {
$element.disabled = $element.checked ? '' : 'disabled';
});
} else {
loop($checks, function($element) {
$element.disabled = '';
});
}
};
var loop = function($elements, cb) {
var max = $elements.length;
while(max--) {
cb($elements[max]);
}
}
var count = function($element) {
return $element.checked ? marcados + 1 : marcados - 1;
}
window.onload = function(){
var $checks = document.querySelectorAll('input[type="checkbox"]');
loop($checks, function($element) {
$element.onclick = function(){
marcados = count(this);
verifyCheckeds($checks);
}
if($element.checked) marcados = marcados + 1;
});
verifyCheckeds($checks);
}
}());
</script>
</head>
<body>
<label><input type="checkbox" value="1" />Item 1</label>
<label><input type="checkbox" value="2" />Item 2</label>
<label><input type="checkbox" value="3" />Item 3</label>
<label><input type="checkbox" value="4" />Item 4</label>
<label><input type="checkbox" value="5" />Item 5</label>
</body>
</html>
A função loop
Essa função é a chave do funcionamento do script. Criei ela para interar sob uma coleção de elementos, e então rodar uma função para cada um desses elementos. Assim não preciso ficar repetindo esse loop por diversos lugares do código.
Ela recebe a coleção de elementos e um callback para executar em cada um desses elementos.
var loop = function($elements, cb) {
var max = $elements.length;
while(max--) {
cb($elements[max]);
}
}
A interface de uso é esta:
loop($elements, function($element) {
//funcao executada para cada $element
});
A função verifyCheckeds
Se já tiverem sido marcados 2 ou mais checkboxes, ela desabilita os outros checks.
Se não, habilita todos eles. Isso serve para o caso do cara marcar dois e depois desmarcar um, assim a função tira o disabled de todos e o usuário pode selecionar outro checkbox.
VanillaJS
Apenas js puro. Bem simples, poucas linhas de código e resolvido. =)
