0

Buen día, actualmente genero un listado de productos dinamicamente. Quedando de esta forma: introducir la descripción de la imagen aquí

var cupones_bienvenida_todos = $('.cupones_bienvenida_todos');
                    var tipoCupon ='';

                    $.each(response.data, function (i) {
                        if (response.data[i].Tipo_cupon == 1){
                            tipoCupon = "Cupón de 60%";
                        }
                        else if(response.data[i].Tipo_cupon == 1){
                            tipoCupon = "Cupón de 80%";
                        }
                        else{
                            tipoCupon = "Cupón de 100%";
                        }


                          $('<tr class="cupones"/>')
                                .append($('<td/>').addClass('nuevo-td')
                                    .append($('<label/>').addClass('label-radio item-content').text(response.data[i].Cod_Cliente +" - "+response.data[i].Nombre)))
                                .append($('<td/>').addClass('label-cell nuevo-td').text(tipoCupon))
                                .append('<div class="cod_cupon" style="display:none">' + response.data[i].Identificador + '</div>')
                                .append($('<td/>').addClass('label-cell nuevo-td')
                                            .append($('<label/>').addClass('label-checkbox item-content')
                                                        .append('<input type="checkbox" name="cupon_check" class="cupon_check" value="' + response.data[i].Identificador + '"/>')
                                                        .append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
                                .appendTo(cupones_bienvenida_todos);
                             if (cantidad_llaves === 0) {
                                $('.cupon_check').prop('disabled', true)
                            }
                        });

el inconveniente que tengo es que puedo seleccionar cualquier checkbox de esos, pero al seleccionar el segundo checkbox debe existir una validación que no me permita chequear otro checkbox si el arreglo productos_seleccionados_lista1 esta vació, ya que productos_seleccionados_lista1 se va llenando del checkbox anterior seleccionado.

Lo he intentado de la siguiente forma, pero el if incluso valida el cuando selecciono el primer checkbox y digamos la validación debe inciar hasta que que vaya a seleccionar 2 o mas checkbox.

$(".cupones_bienvenida_todos").on("click", '.cupon_check', function(){
        if ($(this).is(':checked')){

            if (!cupon_seleccionado_anterior){
                console.log("ANTERIOR A ESTE CUPON NO HABIA CUPON SELECCIONADO");
            }
            else if (!productos_seleccionados_lista1){ //productos_seleccionados_lista1 es un arreglo
                console.log("No ha agregado productos a todos sus cupones. Verifique.");
            }           

        }
        else{
            productosSeleccionados();
        }

    });

Considerar este escenario: cuando ingresa el usuario ningun checkbox va a estar seleccionado, entonces el podra seleccionar cualquier de esos, luego de haber seleccionado un check el usuario podra ir agregando productos, esto es otro listado que muestro abajo con lo cual se llena el arreglo, pero si el usuario selecciona un check, no selecciona ningun producto (no llena el arreglo) y quiere seleccionar otro checkbox no se le debe permitir porque no ha seleccionado ningun producto asi que la unica forma para que seleccione otro check es deseleccionando el anterior con el que intento seleccinar el producto.

3 respuestas 3

1

Para hacerlo con Jquery, solo es necesario utilizar not(), para que si un lemento this esta seleccionado todos los elementos de su misma clase se deseleccionen excepto este mismo ($(this)).

En el siguiente ejemplo podemos observarlo:

$(".check").click(function(){

  $(".check").not(this).prop( "checked", false );

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="check" type="checkbox">
<input class="check" type="checkbox">
<input class="check" type="checkbox">

Como adicional, aquí te dejo: ¿Cómo puedo marcar / desmarcar una entrada de casilla de verificación o un botón de radio?

Espero que te sea de ayuda.

EDIT:

Interprete mal la pregunta, el problema es que estas haciendo una validación que lo que comprueba es si la variable es false para saber si una cadena esta vacía tienes que utilizar .length y comprobar si es igual a 0.

Ejemplo

//Antes, compruebas si productos_seleccionados_lista1 es false.

if (!productos_seleccionados_lista1){
 //Haz algo... 
}

//Ahora, compruebas si productos_seleccionados_lista1 esta vacía.

if (productos_seleccionados_lista1.length == 0){
 //Haz algo... 
}

Ahora, no se como lo estas implementando, pero como ejemplo, puedes usarlo de la siguiente manera:

var productos_seleccionados_lista1 = [];

$(".check").click(function(){

  if (productos_seleccionados_lista1.length == 0){
  
   $(".check").not(this).prop( "checked", false );
  
  }else if (productos_seleccionados_lista1.length > 0){
  
    
  
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="1" class="check" type="checkbox">
<input id="2" class="check" type="checkbox">
<input id="3" class="check" type="checkbox">

0

Si he entendido bien lo que quieres hacer, podrías hacerlo de esta manera:

$('input').click(comprueba_anterior_seleccionado);

function comprueba_anterior_seleccionado () {
    if ($(this).prop('checked') == true) {
    if ($(this).prev('input').prop('checked') == false) {
        alert('Anterior no clickado');
    }  
  }
}

Esta función, comprueba si el checkbox anterior está seleccionado y si no lo está saca por pantalla un alert avisando.

0

$(()=>{
  //Nuestro arreglo, no tengo idea como lo llenas
  var productos_seleccionados_lista1 = [];
  //El handler cuando un checkbox se checkea y deschekea
  $(document).on('change','.chk',function(){
     //Guardamos el selector que se le dió click
     let that = this;
    //Validamos si es el segundo checkbox
    if( $( that ).attr('id') == 'chk2'){
       //Preguntamos si el arreglo está vacio
       if( productos_seleccionados_lista1.length === 0 ){
        //Ciclamos los checkbox y los desactivamos exepto el primero
        $('.chk').each(function(){
          if( this != that ){
            $(this).prop('checked', false);
            $(this).prop('disabled', true);
          }
        });
      }
      //Si no está vacio entonces activamos todo, en caso que se haya desactivado
      else{
        $('.chk').each(function(){
            $(this).prop('disabled', false);
        });
      }
    }
    else{
        $('.chk').each(function(){
            $(this).prop('disabled', false);
        });
      }
  });
  
  $(document).on('click','.add',function(){
    productos_seleccionados_lista1.push('foo');
    $('.items').text( productos_seleccionados_lista1.length + ' items en el arreglo')
  });

  $(document).on('click','.rem',function(){
    productos_seleccionados_lista1.pop();
    $('.items').text( productos_seleccionados_lista1.length + ' items en el arreglo')
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Producto 1 60% <input type="checkbox" class="chk" id="chk1"></p>
<p>Producto 2 60% <input type="checkbox" class="chk" id="chk2"></p>
<p>Producto 3 60% <input type="checkbox" class="chk" id="chk3"></p>
<input type="button" value="Agregar cosas al arreglo" class="add">
<input type="button" value="Quitar cosas al arreglo" class="rem">
<p class="items"></p>

Para saber si está vacío es así

else if ( productos_seleccionados_lista1.length === 0 ){
 //code
}

Si haces

else if (!productos_seleccionados_lista1){
//code
}

Estás preguntando si la variable existe, mas no si está vacío.

EDITO Te agregué un código de ejemplo de cómo funcionaría, interactua con él y dime si te sirve.

6
  • Gracias, pero como podria realizar la valicación de no permitir seleccionar otro checkbox.
    – JG_GJ
    Commented el 3 oct. 2018 a las 15:36
  • Añade tu código de HTML, necesito saber unas cosas de tu checkbox Commented el 3 oct. 2018 a las 15:38
  • Ya, muchas gracias.
    – JG_GJ
    Commented el 3 oct. 2018 a las 15:43
  • Casi por ahi va la solución, solo veo que congela los demas check y no es asi. Si quiero seleccionar otro check primero debo deseleccionar el check para seleccionar el otro. Entonces si ya tengo un checkbox seleccionador debe realizar la validación a momento de seleccionar el segundo check.
    – JG_GJ
    Commented el 3 oct. 2018 a las 16:00
  • Ya no entendí entonces, quieres que cuando se apriete el segundo checkbox se deseleccionen los demas? Commented el 3 oct. 2018 a las 16:03

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.