0

Tengo un grupo de 4 checkbox de los cuales solamente se pueden seleccionar dos. He estado enredando pero ando un poco perdido. ¿Alguien me puede echar una mano?

Gracias de antemano

1

2 respuestas 2

3

Amigo, creo que tengo tu respuesta y sería algo así:

$(document).ready(function(){
		var cantidadMaxima=2;
	// Evento que se ejecuta al soltar una tecla en el input
	$("#cantidad").keydown(function(){
		$("input[type=checkbox]").prop('checked', false);
		$("#seleccionados").html("0");
	});
 
	// Evento que se ejecuta al pulsar en un checkbox
	$("input[type=checkbox]").change(function(){
 
		// Cogemos el elemento actual
		var elemento=this;
		var contador=0;
 
		// Recorremos todos los checkbox para contar los que estan seleccionados
		$("input[type=checkbox]").each(function(){
			if($(this).is(":checked"))
				contador++;
		});
 

 
		// Comprovamos si supera la cantidad máxima indicada
		if(contador>cantidadMaxima)
		{
			alert("Has seleccionado mas checkbox que los indicados");
 
			// Desmarcamos el ultimo elemento
			$(elemento).prop('checked', false);
			contador--;
		}
 
		$("#seleccionados").html(contador);
	});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="1" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="2" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check 2
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="3" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check 3
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="4" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check 4
  </label>
</div>

En el código se define la cantidad máxima que requieras en JS, luego capturas el evento con JQuery tanto del teclado como el cambio. Cuando ejecutas un cambio lo primero que hace es definir capturar el elemento actual y un contador que es comparado con el valor máximo y si lo supera, no te dejará marcar mas, en el lugar donde se encuentra el alert puedes colocar lo que desees, ya sea un alert distinto o bloquearlos.

Si te sirve, no olvides votarlo y ante cualquier duda, consulta!

1

Usando el ejemplo HTML añadido por harifo puedes resumir el código de la siguiente forma:

var limite = 2;
$('input.form-check-input').change(function() {
   if($("input:checked").length > limite) {
       this.checked = false;
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="1" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="2" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check 2
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="3" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check 3
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="4" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check 4
  </label>
</div>

Explicado línea por línea

    var limite = X; //estableces el límite de checkbox seleccionados posible.

    $('input.form-check-input') // seleccionas todos los inputs usando la clase común.

    .change(function() {}  // Usas la función change que monitoriza cambios en los elementos del selector.

    if($("input:checked").length > limite) {   // Usas ":checked" para seleccionar solo los elementos marcados y su propiedad "length" para contarlos y lo comparas con el límite previamente establecido. 
       this.checked = false; //Sí la cantidad de marcados es superior al límite establecido, evitas que se marque estableciendo la propiedad checked del seleccionado como false.
   }

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