Problema: Desabilitar os outros checkboxes ao selecionar uma certa quantidade deles.

a

Passos:

  1. contar a quantidade de checkboxes selecionados;
  2. verificar no load da página se já tem 2 checks marcados;
  3. somar ou subtrair conforme for clicando nos checkboxes;
  4. se a quantidade de checks marcados for igual a 2, então desabilita todos os outros;
  5. 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. =)