3

Requiero su ayuda para saber de que manera puedo pasar de un paso a otro al seleccionar una opción sin necesidad de darle al botón de siguiente.

A continuación les muestro unas imágenes de lo que me refiero.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

El código para pasar con el botón "siguiente" es este:

$(document).ready(function() {
    
    var navListItems = $('ul.setup-panel li a'),
        allWells = $('.setup-content');

    allWells.hide();

    navListItems.click(function(e)
    {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this).closest('li');
        
        if (!$item.hasClass('disabled')) {
            navListItems.closest('li').removeClass('active');
            $item.addClass('active');
            allWells.hide();
            $target.show();
        }
    });
    
    $('ul.setup-panel li.active a').trigger('click');
    
    // ESTRUCTURA PASO 2//
    $('#activate-step-2').on('click', function(e) {
        $('ul.setup-panel li:eq(1)').removeClass('disabled');
        $('ul.setup-panel li a[href="#step-2"]').trigger('click');
        $(this).remove();
    })    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- TAMAÑO PERRO -->
    <div class="row">
        <div class="col-xs-12">
            <div class="col-md-12 well setup-content text-center" id="step-1" style="display: block;">
                <h2> ESCOGE SU TAMAÑO</h2>
                	
        <div style="text-align: center;" class="form-group">
         <div class="cc-selector">
           <div class="row">
                <div class="col-md-4">
                <input checked="checked" id="tamanoperro-0" name="tamanoperro" style="border: none;" type="radio" value="pequeno"> 
                <label class="drinkcard-cc perropequeno" for="tamanoperro-0"></label> 
                <p class="wow pulse price animated" style="visibility: visible; animation-name: pulse;">0 - 12 Kg</p>
                </div>
                <div class="col-md-4">
                <input id="tamanoperro-1" name="tamanoperro" type="radio" value="mediano"> 
                <label class="drinkcard-cc perromediano" style="height: 160px;" for="tamanoperro-1"></label>
                <p class="wow pulse price animated" style="visibility: visible; animation-name: pulse;">12 - 35 Kg</p>
                </div>
                <div class="col-md-4">
                <input id="tamanoperro-2" name="tamanoperro" type="radio" value="grande"> 
                <label class="drinkcard-cc perrogrande" style="height: 200px;" for="tamanoperro-2"></label>
                <p class="wow pulse price animated" style="visibility: visible; animation-name: pulse;">35 o más Kg</p>
                </div>
               
           </div>
          </div>
         </div>
                <button id="activate-step-2" class="btn btn-primary btn-lg">Siguiente</button>
            </div>
        </div>
    </div>

Quedo atento a sus colaboraciones, dado que no se de que manera lo podría llevar a cabo.

De antemano muchas gracias.

2
  • De qué checkbox estás hablando? Ayudaría ver el código HTML para tener una mejor idea.
    – azeós
    el 3 oct. 2019 a las 6:52
  • Ya actualizo la pregunta para mostrarte.. son de radios
    – Animal Box
    el 3 oct. 2019 a las 7:02

1 respuesta 1

2

Si ya todo lo anterior esta funcionando, entonces solo debes agregarle los eventos de pasar al siguiente a los checkbox.

Por ejemplo para el primero, como los checkbox tienen nombre tamanoperro, debes pasarle la función que tenias para #activate-step-2 así:

    $('input[name="tamanoperro"]').on('click', function(e) {
        $('ul.setup-panel li:eq(1)').removeClass('disabled');
        $('ul.setup-panel li a[href="#step-2"]').trigger('click');
        $(this).remove();
    })

Tendras que hacerlo de igual forma para los siguientes checkbox con sus respectivos #activate-step.

Espero sea lo que buscas, saludos.

1
  • Justo lo que necesitaba, muchas gracias y que pena por la demora.
    – Animal Box
    el 6 oct. 2019 a las 22:00

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.