¿Cómo agregar un atributo de "solo lectura" a un <input>?

Question

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

Answer 1

jQuery < 1,9

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

jQuery 1.9+

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

Leer más sobre difference between prop and attr

Answer 2

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

Answer 3

creo "desactivado" excluye la entrada de ser enviado en el puesto

Answer 4

Para habilitar solo lectura:

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

Para deshabilitar sólo lectura

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

Answer 5

Puede desactivar el de sólo lectura mediante el uso de la .removeAttr;

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

Answer 6

Uso $.prop()

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

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

Answer 7

Sólo lectura es un atributo tal como se define en html, lo que tratarlo como tal.

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

Como tal, al usar jquery agregarlo y eliminarlo es lo que tiene sentido.

Conjunto algo de sólo lectura:

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

Retire sólo lectura:

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

Ésta era la única alternativa que realmente trabajó para mí. Espero que ayude!

Answer 8

Utilice la propiedad setAttribute. Tenga en cuenta en el ejemplo que si selecciona 1 aplica 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> 

Answer 9

Para jQuery versión < 1,9:

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

Para la versión jQuery> = 1,9:

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