Tengo un par de casillas de verificación, de las cuales algunas ya están marcadas en la carga de la página.

Lo que quiero hacer es desactivar las otras casillas de verificación si se marcan 2 casillas.

Mi código funciona bien si marco / desmarco las casillas yo mismo. Pero cuando 2 casillas ya están marcadas (usando javascript o HTML) en la carga de la página, la otra casilla aún se puede marcar hasta que las casillas se deshabiliten.

Dado que 2 casillas ya están marcadas en la carga de la página, las otras casillas de verificación deben estar deshabilitadas hasta que desactive una de las 2 casillas marcadas. Este no es el caso actualmente.

Este es mi javascript:

jQuery(function($) {

 var max = 2;
 var checkboxes = $('input[type="checkbox"]');

  checkboxes.change(function(){
      var current = checkboxes.filter(':checked').length;
      checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
  });

   $('.one').attr('checked','checked');
   $('.two').attr('checked','checked');

});

Que va debajo de mis casillas de verificación:

        <div id="checkboxes">
                <input type="checkbox" class="1" id="checkbox" name='Some[array]' value="1"> 
                <input type="checkbox" class="2" id="checkbox" name='Some[array]' value="2"> 
                <input type="checkbox" class="3" id="checkbox" name='Some[array]' value="3"> 
                <input type="checkbox" class="4" id="checkbox" name='Some[array]' value="4"> 
        </div>
0
Dean 29 ago. 2014 a las 20:41

2 respuestas

La mejor respuesta

Simplemente active el evento .change() cuando se cargue la página:

checkboxes.change(function () {
    var current = checkboxes.filter(':checked').length;
    checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
}).change();

ejemplo de jsFiddle

2
j08691 29 ago. 2014 a las 16:45

Sus selectores están equivocados y el evento checked no se activará si cambia el valor mediante programación. Sin embargo, puede activar el evento de cambio manualmente para forzar que su código funcione cuando configura inicialmente los valores. Use las dos líneas a continuación:

$('.1').prop('checked','checked').change();
$('.2').prop('checked','checked').change();
1
p e p 29 ago. 2014 a las 16:46