1

Tengo una función que ejecutar al hacerle click en un checkbox que en la otra lista de checkbox solo pueda seleccionar 3 input:checkbox. Quiero que al volver a desmarca la el primer checkbox pueda volver a marcar todos los input:checkbox otra vez.

Pongo el ejemplo del código aquí. Como dije quiero desmarcar el primer input:checkbox y que ya se no se ejecute la función que solo me permite seleccionar 3 abajo.

Gracias al que me ayude!

function limite() {
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
   }
});

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="button" onclick="limite();" value="asd"/> Activar solo que seleccionen 3 casillas

       <div class="pricing-levels-3">
          <p><strong>Seleccionar</strong></p>
          <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
        </div>

1 respuesta 1

1

Una forma de hacerlo sería verificando el estado del check que controlará la cantidad de checkbox marcados. (change) , si este está marcado entonces removemos el :checked a todos los checkbox y asignamos un nuevo limite 3 , caso contrario asignamos a limit el total de checkbox con el nombre single-checkbox

$(function() {
    var max = $('input.single-checkbox').length;
    var limit = max;
    $(document).on('change','#checkLimit',function(){
        if(this.checked) {
            $('input.single-checkbox').removeAttr('checked');
            limit = 3;
        }
        else limit = max;
    });
    $(document).on('change','input.single-checkbox', function(evt) {
       if($(this).siblings(':checked').length >= limit) {
           this.checked = false;
       }
    });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="button" id="checkLimit" value="asd"/> Activar solo que seleccionen 3 casillas
<div class="pricing-levels-3">
  <p><strong>Seleccionar</strong></p>
  <input class="single-checkbox" type="checkbox"  name="vehicle" value="Bike">Level 1<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.