0

Tengo el siguiente código:

 $("#accion_stock_remove").click(function(){
        if($("#accion_stock_remove").is(':checked')){
            $("#stock_roto_yes").removeClass("hidden");
            $("#stock_roto").slideDown("slow");
            $("#stock_roto").attr("disabled",false);
            $("#stock_noroto").attr("disabled",false);

        }
    });
$("#accion_stock_add").click(function(){
        if($("#accion_stock_add").is(':checked')){
            $("#stock_roto_yes").addClass("hidden");
            $("#stock_roto").attr("disabled",true);
            $("#stock_noroto").attr("disabled",true);

        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-md-6">
                    <input type="radio" class="hidden checkBox" name="accion_stock" id="accion_stock_add"/>
                    <label for="accion_stock_add" class="checkBoxLabel" style="width: 100% !important">Añadir</label>
                </div>

                <div class="col-md-6">
                    <input type="radio" class="hidden checkBox" name="accion_stock" id="accion_stock_remove"/>
                    <label for="accion_stock_remove" class="checkBoxLabel" style="width: 100% !important">Quitar</label>
                </div>

                <div class="row hidden" id="stock_roto_yes">
                    <div class="col-md-12"><center>ES STOCK ROTO?</center></div>

                    <div class="col-md-6">
                        <input type="radio" class="hidden checkBox" name="stock_roto" id="stock_roto" value="roto" disabled/>
                        <label for="stock_roto" class="checkBoxLabel" style="width: 100% !important">SÍ</label>
                    </div>

                    <div class="col-md-6">
                        <input type="radio" class="hidden checkBox" name="stock_roto" id="stock_noroto" value="noroto" disabled/>
                        <label for="stock_noroto" class="checkBoxLabel" style="width: 100% !important">NO</label>
                    </div>
                </div>

Lo que necesito es que al hacer click en el boton Quitar se despliegue con una animación slideDown() el div stock_roto_yes y al hacer click en Añadir que se cierre con una animación slideUp() pero no me funciona, y la consola del inspector tampoco me dice que haya error.

3 respuestas 3

0

Intenta añadir tu código cuando el documento esté cargado y listo:

$(function() {
     $("#accion_stock_remove").click(function(){
        if($("#accion_stock_remove").is(':checked')){
            $("#stock_roto_yes").removeClass("hidden");
            $("#stock_roto").slideDown("slow");
            $("#stock_roto").attr("disabled",false);
            $("#stock_noroto").attr("disabled",false);

        }
    });
$("#accion_stock_add").click(function(){
        if($("#accion_stock_add").is(':checked')){
            $("#stock_roto_yes").addClass("hidden");
            $("#stock_roto").attr("disabled",true);
            $("#stock_noroto").attr("disabled",true);

        }
    });
});

Lo mas probable es que se ejecute antes el jQuery que la creación de los elementos a los que haces referencia.

0

Exacto, intenta meterlo dentro de

jQuery(document).ready(         
          function(){
$("#accion_stock_remove").click(function(){
        if($("#accion_stock_remove").is(':checked')){
            $("#stock_roto_yes").removeClass("hidden");
            $("#stock_roto").slideDown("slow");
            $("#stock_roto").attr("disabled",false);
            $("#stock_noroto").attr("disabled",false);

        }
    });
$("#accion_stock_add").click(function(){
        if($("#accion_stock_add").is(':checked')){
            $("#stock_roto_yes").addClass("hidden");
            $("#stock_roto").attr("disabled",true);
            $("#stock_noroto").attr("disabled",true);

        }
    });

});

0

El problema es la clase hidden cual tiene la propiedad: display: none!important;

Solución: He eliminado la clase hidden y he añadido medio CSS al elemento stock_roto_yes la propiedad display: none; (sin !important)

$("#accion_stock_remove").click(function(){
  
  if($("#accion_stock_remove").is(':checked')){

    // Eliminado
    //$("#stock_roto_yes").removeClass("hidden");
    
    $("#stock_roto_yes").slideDown("slow");
    $("#stock_roto").attr("disabled",false);
    $("#stock_noroto").attr("disabled",false);
  }
});

$("#accion_stock_add").click(function(){
  
  if($("#accion_stock_add").is(':checked')){
    
    // Eliminado
    //$("#stock_roto_yes").addClass("hidden");
    
    $("#stock_roto_yes").slideUp("slow");
    $("#stock_roto").attr("disabled",true);
    $("#stock_noroto").attr("disabled",true);
  }
});
#stock_roto_yes {
  
  display: none; /* sin !important */
  
  background-color: red; /* solo para demostración */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-6">
  <input type="radio" class="hidden checkBox" name="accion_stock" id="accion_stock_add"/>
  <label for="accion_stock_add" class="checkBoxLabel" style="width: 100% !important">Añadir</label>
</div>
<div class="col-md-6">
  <input type="radio" class="hidden checkBox" name="accion_stock" id="accion_stock_remove"/>
  <label for="accion_stock_remove" class="checkBoxLabel" style="width: 100% !important">Quitar</label>
</div>
<div class="row" id="stock_roto_yes">
  <div class="col-md-12"><center>ES STOCK ROTO?</center></div>
  <div class="col-md-6">
    <input type="radio" class="hidden checkBox" name="stock_roto" id="stock_roto" value="roto" disabled/>
    <label for="stock_roto" class="checkBoxLabel" style="width: 100% !important">SÍ</label>
  </div>
  <div class="col-md-6">
    <input type="radio" class="hidden checkBox" name="stock_roto" id="stock_noroto" value="noroto" disabled/>
    <label for="stock_noroto" class="checkBoxLabel" style="width: 100% !important">NO</label>
  </div>
</div>

En jQuery cuando usamos por ejemplo fadeIn(), slideUp(), show()... etc necesitan la propiedad display: none; o $(elemento).hide(); el cual es equivalente.

Cuando se emplea important en una declaración de estilo, esta declaración sobreescribe a cualquier otra. Aunque técnicamente !important no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de !important, es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar porque rompre la cascada (artículo en ingles) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el !important son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad.

Fuente Mozilla: La excepción !important

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.