Solución:
Siempre utilizar el prop()
método para habilitar o deshabilitar elementos cuando se usa jQuery (vea a continuación por qué).
En tu caso sería:
$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
});
Ejemplo de jsFiddle aquí.
Por que usar
prop()
cuando podrías usarattr()
/removeAttr()
¿para hacer esto?
Básicamente, prop()
debe usarse al obtener o configurar propiedades (tal como autoplay
, checked
, disabled
y required
Entre otros).
Mediante el uso removeAttr()
, estás eliminando por completo el disabled
atribuirse a sí mismo – mientras prop()
es simplemente establecer el valor booleano subyacente de la propiedad en falso.
Mientras que lo que quieres hacer pueden terminar usando attr()
/removeAttr()
, no significa eso deberían hecho (y puede causar un comportamiento extraño / problemático, como en este caso).
Los siguientes extractos (tomados de la documentación de jQuery para prop ()) explican estos puntos con mayor detalle:
“La diferencia entre atributos y propiedades puede ser importante en situaciones específicas. Antes de jQuery 1.6, el
.attr()
El método a veces tenía en cuenta los valores de propiedad al recuperar algunos atributos, lo que podría causar un comportamiento incoherente. A partir de jQuery 1.6, el.prop()
El método proporciona una forma de recuperar explícitamente los valores de propiedad, mientras que
.attr()
recupera atributos “.“Las propiedades generalmente afectan el estado dinámico de un elemento DOM sin cambiar el atributo HTML serializado. Los ejemplos incluyen
value
propiedad de los elementos de entrada, ladisabled
propiedad de entradas y botones, o lachecked
propiedad de una casilla de verificación. los.prop()
El método debe usarse para establecerdisabled
ychecked
en vez de.attr()
método. los.val()
El método debe usarse para obtener y configurar
value
. “
para eliminar el uso de atributos deshabilitados,
$("#elementID").removeAttr('disabled');
y para agregar el uso de atributos deshabilitados,
$("#elementID").prop("disabled", true);
Disfrutar 🙂
<input type="text" disabled="disabled" class="inputDisabled" value="">
<button id="edit">Edit</button>
$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').removeAttr("disabled")
});
http://jsfiddle.net/ZwHfY/