Configuración de un control para solo lectura usando jquery 1.6 .prop ()

Question

Con el lanzamiento de jQuery 1.6, la recomendación sobre SO ha sido generalmente comenzar a usar prop () donde solía usar attr ().

¿Qué sucede cuando quiero que un elemento sea de solo lectura?

$('.control').prop('readonly', 'readonly');
$('.control').prop('readonly', true);

Ninguno de estos parece hacer que el control sea de solo lectura.¿Hacer un elemento de solo lectura es la excepción a la regla?

Answer 1

El problema es que el nombre de la propiedad distingue entre mayúsculas y minúsculas.Prueba:

$('.control').prop('readOnly', true);

Aunque realmente no sé por qué esto requiere jQuery.Esto funciona igual de bien:

document.getElementsByClassName("control")[0].readOnly = true;

Answer 2

Pruebe esto:

$(".control").prop({ readOnly: true });

Pienso en ello de esta manera: .attr () obtiene el valor predeterminado en el marcado html mientras .prop () obtiene / establece el valor de forma dinámica.Mira lo siguiente:

<input id="someInput" readonly="readOnly" />

$(".control").attr("readOnly") // would yield "readOnly"
$(".control").prop("readOnly") // would yield true
$(".control").is(":readOnly")  // would yield true

La documentación de la API dice esto:

La diferencia entre atributos y las propiedades pueden ser importantes en situaciones específicas.Antes de jQuery 1.6, el método .attr () a veces tenía en cuenta los valores de propiedad cuando recuperando algunos atributos, que podría causar un comportamiento inconsistente.Como de jQuery 1.6, el método .prop () proporciona una forma de recuperar explícitamente valores de propiedad, mientras que .attr () solo recupera atributos.