0

Buen día:

Con la siguiente función realizo una validación que me permite seleccionar checkbox segun la cantidad de llaves que tenga.

var total = 0;
var total_descuento=0;
var cantidad_llaves = localStorage.getItem('Cant_llaves');
console.log("ESTE ES EL TOTAL DE CANTIDADES LLAVES: "+cantidad_llaves);
$('#cupones_bienvenida').on('click','.cupon_check', function(e){
    var cupones = $(this).closest('.cupones');
    var cod_cupon  = cupones.find('.cod_cupon').text();
    var tipo_cupon = cupones.find('.tipo_cupon').text();
    var sub_tipo = cupones.find('.sub_tipo').text();
    var descuento_cupon = cupones.find('.descuento_cupon').text();
    var vencimiento = cupones.find('.vencimiento').text();

    console.log(idPedido,cod_cupon,tipo_cupon,sub_tipo,descuento_cupon,vencimiento);
    if (cantidad_llaves>0){    
        if($(this).is(':checked')) {
            total++;
            total_descuento=parseInt(descuento_cupon)+total_descuento;
            agregarCupon(idPedido,cod_cupon,tipo_cupon,sub_tipo,descuento_cupon,vencimiento);
        } else {
             total--;
             total_descuento=total_descuento-parseInt(descuento_cupon);
             eliminarCupon(idPedido, cod_cupon, tipo_cupon);
        }

        if (total>cantidad_llaves){
            myApp.alert("No tiene permitido seleccionar mas cupones segun sus llaves");
            $(".cupon_check").prop( "disabled", true )
        }
        console.log(total);
        console.log(total_descuento);
        $$('.totalDescuento').text(total_descuento);
    } else{
        myApp.alert('No tiene llaves disponibles')
    }
});

Suponiendo que tenga cantidad_llaves = 2; esto me permitira seleccionar unicamente 2 checkbox, entonces al llegar a esta condicion: la variable total, lleva la cantidad de checkbox selecionados.

if (total>cantidad_llaves){
    myApp.alert("No tiene permitido seleccionar mas cupones segun sus llaves");
    $(".cupon_check").prop( "disabled", true )
}

Me debe deshabilitar los checkbox que no fueron seleccionados y asi mismo descheckear el 3 check que active y pues tambien deshabilitarlo.

en esta linea $(".cupon_check").prop( "disabled", true ) deshabilito todos y eso no quiero.

Gracias.

2 respuestas 2

1

Prueba lo siguiente:

if (total>cantidad_llaves){
    myApp.alert("No tiene permitido seleccionar mas cupones segun sus llaves");
    $(".cupon_check:not(:checked)").prop( "disabled", true );
}

Y antes de quitar el tercer check mejor valida en el onchange de cada checkbox, algo como esto:

var maxChecks = 2;
$(".cupon_check").change(function () {
    if($( "input:checked" ).length >= maxChecks)
        $(".cupon_check:not(:checked)").prop( "disabled", true );
    else
        $(".cupon_check:not(:checked)").prop( "disabled", false );
});

Según tus comentarios, cambia el bloque de las validaciones, de modo que primero verifiques si aún tiene permitidos:

if($(this).is(':checked')) {
  if (total>=cantidad_llaves){
    $(this).prop( "checked", false );
    myApp.alert("No tiene permitido seleccionar mas cupones segun sus llaves");
    $(".cupon_check:not(:checked)").prop( "disabled", true )
  }
  else
  {
    total++;
    total_descuento=parseInt(descuento_cupon)+total_descuento;
    agregarCupon(idPedido,cod_cupon,tipo_cupon,sub_tipo,descuento_cupon,vencimiento);
  }

} else {
  total--;
  $(".cupon_check:not(:checked)").prop( "disabled", false );
  total_descuento=total_descuento-parseInt(descuento_cupon);
  eliminarCupon(idPedido, cod_cupon, tipo_cupon);
}
6
  • Y antes de quitar el tercer check mejor valida en el "onchange" de cada checkbox, como sería esto en codigo, de esa parte no he pasado. Muchas gracias.
    – JG_GJ
    Commented el 21 sept. 2018 a las 17:48
  • Revisa el 2do bloque de código, este "trigger" se activa en el "change" de cada uno de los elementos de esa clase, lo que hace es validar contra una variable la cantidad de selecciones, si llega al máximo deshabilita, sino, habilita. Commented el 21 sept. 2018 a las 17:52
  • no entiendo porque cuando le doy al 3 check suma y ya no deberia sumar el 3 check porque ya no tiene permitido, como crees que pueda corregir esto.
    – JG_GJ
    Commented el 21 sept. 2018 a las 17:57
  • A tu pregunta, asumiendo que total es 2 en este momento, al darle el 3er check "if($(this).is(':checked'))" evaluará en true, y al ingresar a este bloque hace un total++, cuando sale de este condicional entra al siguiente "if (total>cantidad_llaves)" y ya acá total es 3. Lo que debes hacer es tener este segundo if dentro del primero y evaluar antes de hacer el total++ y ahí quitar el check. Commented el 21 sept. 2018 a las 18:04
  • 1
    Muchas gracias Jocksan. Ya funciono como queria.
    – JG_GJ
    Commented el 21 sept. 2018 a las 18:16
0

Podes seleccionar los no checked con el filtro input[type='checkbox']:not(:checked), algo así:

var maxOptions = 3;
$(function() {
  $("#guardar").attr('disabled', true);
  $("#guardar").on('click', function() {
    var seleccionados = [];
    $("#opciones input[type='checkbox']:checked").each(function() {
      seleccionados.push($(this).val());
    });
    $("#seleccion").html(seleccionados.join(", "));
    $("#guardar").attr('disabled', true);
    $("#resultado").show();
  });
  $("#resultado").on('click', function() {
    $("#resultado").hide();
    $("#guardar").attr('disabled', false);
  });
  $("#puntos").html(maxOptions);
  $("#opciones input[type='checkbox']").on("change",
    function(e) {
      var losChecked = $("#opciones input[type='checkbox']:checked");
      var losNoChecked = $("#opciones input[type='checkbox']:not(:checked)");
      var cantidadChecked = losChecked.length;
      if (cantidadChecked >= maxOptions) {
        losNoChecked.attr('disabled', true);
        $("#mensaje").show();
        $("#guardar").attr('disabled', false);
      } else {
        losNoChecked.attr('disabled', false);
        $("#mensaje").hide();
        $("#guardar").attr('disabled', true);
      }
      $("#puntos").html(maxOptions - cantidadChecked);
    });
});
#mensaje {
  display: none;
  color: red;
}

#puntos {
  color: green;
  font-weight: bold;
}

#resultado {
  display: none;
  cursor: pointer;
}

#resultado p {
  position: fixed;
  top: 10px;
  left: 50%;
  width: 250px;
  padding: 20px;
  background: #f0f0f0;
  z-index: 10;
  margin-left: -135px;
  text-align: center;
  border-radius: 20px;
  line-height: 60px;
  box-shadow: 2px 2px rgba(0, 0, 0, .75);
}

#resultado:before {
  content: " ";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opciones">
  <div id="stats">
    Tienes <span id="puntos"></span> puntos disponibles.
    <button id="guardar" disabled="disabled">Guardar</button>
  </div>
  <label><input type="checkbox" name="opciones[]" value="1">1</label><br/>
  <label><input type="checkbox" name="opciones[]" value="2">2</label><br/>
  <label><input type="checkbox" name="opciones[]" value="3">3</label><br/>
  <label><input type="checkbox" name="opciones[]" value="4">4</label><br/>
  <label><input type="checkbox" name="opciones[]" value="5">5</label><br/>
  <label><input type="checkbox" name="opciones[]" value="6">6</label><br/>
  <div id="mensaje">Máximo alcanzado, quita uno para elegir otro o presiona guardar para continuar</div>
</div>
<div id="resultado">
  <p>Has elegido las opciones <span id="seleccion"></span></p>
</div>

Tu Respuesta

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

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