¿Cómo agregar un atributo "readonly" a un <input>?

301

¿Cómo puedo agregar readonlya un específico <input>? .attr('readonly')No funciona.

javascript jquery

— Qiao
fuente

2

.attr ('readonly', verdadero) funciona, otros no

— Qiao

3

.attr ('readonly', 'readonly') también funciona

— Qiao

3

Depende de qué DOCTYPE use. Para los DTD de HTML 4.01, la respuesta de CMS está funcionando y es HTML 4.01 válido. Si usa un XHTML DTD, la respuesta de ceejayoz está funcionando y es XHTML válido.

— bjoernwibben

2

No depende de doctype, el DOM es el mismo si se leyó a través de HTML o XML, y en cualquier caso XHTML casi siempre se sirve como HTML, no XML, por compatibilidad con IE.

— bobince

545

jQuery <1.9

$('#inputId').attr('readonly', true);

jQuery 1.9+

$('#inputId').prop('readonly', true);

Lea más sobre la diferencia entre prop y attr

— CMS
fuente

1

¿Estás seguro? También lo pensé, pero no puedo encontrar nada en las especificaciones. <input name = "foo" readonly = "readonly" value = "bar" /> se valida perfectamente en validator.w3.org con xhtml 1.0 estricto.

— Jonas Stensved

17

Esta publicación debe cambiarse a .prop () en lugar de .attr (), como se indica en la API jQuery: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

El atributo de solo lectura es un "atributo booleano": whatwg.org/specs/web-apps/current-work/#boolean-attribute A pesar del nombre algo engañoso, los valores no deben ser "verdaderos" o "falsos". Si bien creo que el código anterior realmente funcionará (probado en Chrome con jQuery 1.8.1), puede conducir a una confusión posterior para los inexpertos. Además, de acuerdo con los documentos de jQuery, el valor debe ser número o cadena, no un booleano. api.jquery.com/attr/#attr2

— Lucas

151

Use $ .prop ()

$("#descrip").prop("readonly",true);

$("#descrip").prop("readonly",false);

— Greg
fuente

8

Después de leer la API jQuery para .prop, esta debería ser la respuesta aceptada. Siempre había hecho .attr ('readonly', 'readonly') y .removeAttr ('readonly') en el pasado, pero esto parece ser más correcto y hace que el código también sea más limpio.

— Evan w

44

Todos deberían usar esta respuesta, como se indica aquí: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

44

Una advertencia con el uso $.prop(): Prop establecerá el atributo de solo lectura en una cadena en blanco / vacía, por lo que si tiene algún CSS que use el selector de atributos [readonly="readonly"], deberá cambiarlo a [readonly](o incluir ambos).

— Lucas

28

Readonly es un atributo tal como se define en html, así que trátelo como tal.

Debe tener algo como readonly = "readonly" en el objeto con el que está trabajando si desea que no sea editable. Y si desea que sea editable nuevamente, no tendrá algo como readonly = '' (esto no es estándar si lo entendí correctamente). Realmente necesita eliminar el atributo como un todo.

Como tal, mientras usa jquery, agregarlo y eliminarlo es lo que tiene sentido.

Establecer algo de solo lectura:

$("#someId").attr('readonly', 'readonly');

Eliminar solo lectura:

$("#someId").removeAttr('readonly');

Esta fue la única alternativa que realmente funcionó para mí. ¡Espero eso ayude!

20

.attr('readonly', 'readonly')debería hacer el truco. Tu .attr('readonly')solo devuelve el valor, no establece uno.

— ceejayoz
fuente

16

Attr () de jQuery funciona en propiedades de JavaScript, no en atributos de HTML, aunque los nombres implican lo contrario. attr ('readonly') en realidad está operando en la propiedad HTML de Nivel 1 DOM readOnly, que es un valor booleano, por lo que 'true' es más apropiado. Sin embargo, la cadena 'readonly' también es un valor verdadero cuando se convierte automáticamente a un valor booleano, por lo que lo anterior aún funciona.

— bobince

No creo que quieras establecer el atributo en 'verdadero'. El .attrvalor solo debe ser una cadena o un número, no un booleano, de acuerdo con los documentos de jQuery: api.jquery.com/attr/#attr2 Además, los "atributos booleanos" HTML solo deben ser una cadena vacía o el valor del atributo. Creo que la solución es usar .prop()para evitar confusiones.

— Lucas

16

Creo que "deshabilitado" excluye la entrada de ser enviada en la POST

44

Si lo hace Encontré este hilo mientras buscaba una alternativa a "deshabilitado" solo por este motivo.

— Jonas Stensved

pero puede habilitarlo justo antes de enviarlo, y deshabilitarlo más tarde $ (document) .on ('submit', "#myform", function (e) {// enable input return true; // luego deshabilítelo nuevamente si requiere} funciona lo probé

— Geomorillo

¿Los valores de entrada de solo lectura en html pueden enviarse en POST sin usar oculto?

— Ajay Takur

12

Puede deshabilitar el readonly utilizando .removeAttr;

$('#descrip').removeAttr('readonly');

— Steve
fuente

5

Para habilitar solo lectura:

$("#descrip").attr("readonly","true");

Para deshabilitar solo lectura

$("#descrip").attr("readonly","");

— Pradeep
fuente

Desde api.jquery.com/attr "A partir de jQuery 1.6, el método .attr () devuelve indefinido para los atributos que no se han establecido. Para recuperar y cambiar las propiedades DOM, como el estado verificado, seleccionado o deshabilitado de los elementos de formulario, use el método .prop () ".

— David Clarke

1

El atributo no debe establecerse en una cadena de "verdadero". Esto puede funcionar, pero no es técnicamente correcto. (Ver mis comentarios anteriores arriba.)

— Lucas

No use esta sugerencia, hay muchas mejores disponibles aquí. "verdadero" no es correcto para la configuración, y la eliminación también es incorrecta.

— MiFiHiBye

4

Use la propiedad setAttribute. Tenga en cuenta, por ejemplo, que si selecciona 1, aplique el atributo de solo lectura en el cuadro de texto; de lo contrario, elimine el atributo de solo lectura.

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>

— Diogo Rodrigues
fuente

-4

Para la versión jQuery <1.9:

$('#inputId').attr('disabled', true);

Para la versión jQuery> = 1.9:

$('#inputId').prop('disabled', true);

— Osman Adak
fuente