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. =)