1

Estoy trabajando con Spring webflow y tengo un elemento form:checkbox de tipo switch en mi jsp que por defecto debe estar disabled. Me estoy volviendo loco intentando habilitarlo mediante JQuery cuando se cumple una condición.

<form:checkbox id="anId" path="" value="" cssClass="js-switch" disabled="true"/>

El código html que genera es así:

<input id="anId" class="js-switch" disabled="" type="checkbox" value="" data-switchery="true" style="display: none;">
<span class="switchery" id="anId" style="">
<small style=""></small>
</span>

He probado cambiando el disabled a true, eliminando el atributo disabled, también:

$("#anId").trigger("chosen:updated");

¿Cómo debería implementar esto para que funcione?

Marco tu respuesta correcta porque con la información que di, lo es. El problema radica en:

<span style="patatan:a_lot_of_stuff;"  class="switchery" id="anId"  />

que no copié por brevedad, es quien le da la apariencia de disabled al mismo. Sabiendo eso, solo es:

$("span#anId").attr("style", "pataton:otra_castaña;");

y

<small style="etc" />

pues más de lo mismo:

$("span#anId small").attr("style", "stuff");

Con esto no funciona el evento click ni a la fuerza, intenté:

$("span#anId").off("click");

...al principio (ni sé porqué) pero luego lo usé cuando quiero que vuelva a estar disabled y se comporte como tal. Lo que hice:

$("div#el_que_lo_contiene").click(function(){
    if($("span#anId small").css("left")=="20px"){
        $("span#anId small").attr("style", "left:0px;y:mas;"); 
        $("input#anId").val(false);
    } else {
        $("span#anId small").attr("style", "left:20px;y:mas;"); 
        $("input#anId").val(true);
    }
});

Para enviar el valor que contiene el input (que es quien realmente lo almacena) hago algo asi:

$("send").click(function(){
    $("input#anId").removeAttr("disabled");
}); 

y debería llegar al controller... Luego controlar el comportamiento y listo.

4
  • 1
    Cuando dices que has probado cambiando el disabled a true, has probado esto: $("input.anId").attr("disabled", true);?
    – lois6b
    Commented el 25 ene. 2017 a las 12:23
  • Sí también lo he probado y no surte ningún efecto, y cuando hago removeAttr("disabled") desaparece el disabled pero sin embargo el control sigue disabled... y me he equivocado quería decir que lo pongo a false, perdón.
    – Luis
    Commented el 25 ene. 2017 a las 12:29
  • Mira a ver si funciona con $("input.anId").removeAttr('disabled');
    – Lithorell
    Commented el 25 ene. 2017 a las 12:42
  • Gracias por las respuestas, lo he probado y me elimina el disabled en el código html pero sigue estando disabled... También he probado a cargarme con .remove todo lo que genera y hacer un append (aunque es un poco chapucero creo yo), el problema es que cuando hago el append me lo añade también disabled.
    – Luis
    Commented el 25 ene. 2017 a las 12:53

1 respuesta 1

1

Cuando hagas clic en un botón que quieras que deshabilite o active un checkbox, deberás usar el siguiente código:

https://jsfiddle.net/tcbr22b6/

$("button").on("click", function() {
    if($("input[type='checkbox']").prop("disabled")) {
        $("input[type='checkbox']").prop("disabled", false)
    }
    else {
        $("input[type='checkbox']").prop("disabled", true)
    }
});

Aquí lo que hace es comprobar si la propiedad disabled está activa o no, y en función de ello deshabilita o no el checkbox.
Aquí ya deberás tú poner id's, clases, o como lo quieras realizar.

1
  • Gracias por la respuesta, he probado el código que planteas y efectivamente elimina el disabled del input, el problema es que el código que genera mi jsp crea un input:checkbox con style=display:none; y debajo el control que realmente muestra y que está disabled: <span class="switchery" id="anId" style=""> <small style=""></small> </span> No tiene la propiedad disabled por ningún lado... y sin embargo ese span está disabled... no sé si me explico
    – Luis
    Commented el 25 ene. 2017 a las 13:46

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.