¿Cómo puedo usar jQuery para hacer una entrada de solo lectura?

142

Tengo la siguiente entrada:

  <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>

¿Cómo puedo usar jQuery para hacer de este elemento una entrada de solo lectura sin cambiar el elemento o su valor?

jquery useranon
fuente

255

En estos días con jQuery 1.6.1 o superior, se recomienda utilizar .prop () al establecer atributos / propiedades booleanas.

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

Gourneau
fuente

89

simplemente agregue el siguiente atributo

// for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

jQuery para hacer el cambio al elemento (sustituto disabledpara readonlyla siguiente configuración de readonlyatributo).

$('#fieldName').attr("disabled","disabled")

o

$('#fieldName').attr("disabled", true)

NOTA: A partir de jQuery 1.6, se recomienda usar en .prop()lugar de .attr(). El código anterior funcionará exactamente igual, excepto como sustituto .attr()de .prop().

Russ Cam
fuente

44

deshabilitar un campo no es lo mismo que hacerlo no editable, ¿verdad? deshabilitarlo hará que tampoco se envíe

Dave

2

@Dave correcto. También las entradas de solo lectura pueden enfocarse, las entradas deshabilitadas no pueden

Russ Cam

74

Para hacer una entrada de solo lectura:

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

para hacerlo usar lectura / escritura:

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

agregar el disabledatributo no enviará el valor con post.

Reem
fuente

7

Puede hacer esto simplemente marcándolo disabledo enabled. Puede usar este código para hacer esto:

//for disable
$('#fieldName').prop('disabled', true);

//for enable 
$('#fieldName').prop('disabled', false);

o

$ ('# fieldName'). prop ('readonly', verdadero);

$ ('# fieldName'). prop ('solo lectura', falso);

--- Es mejor usar prop en lugar de attr.

pixellab
fuente

77

Las entradas deshabilitadas no se envían en el formulario post / get.

Nielsvh

4

Use este ejemplo para hacer que el cuadro de texto sea Solo lectura o No.

<input type="textbox" class="txt" id="txt"/>
<input type="button" class="Btn_readOnly" value="Readonly" />
<input type="button" class="Btn_notreadOnly" value="Not Readonly" />

<script>

    $(document).ready(function(){
       ('.Btn_readOnly').click(function(){
           $("#txt").prop("readonly", true);
       });

       ('.Btn_notreadOnly').click(function(){
           $("#txt").prop("readonly", false);
       });
    });

</script>

Gopakumar AP
fuente

3

Hay dos atributos, a saber, readonlyy disabled, que pueden hacer una entrada de solo lectura. Pero hay una pequeña diferencia entre ellos.

<input type="text" readonly />
<input type="text" disabled />

El readonlyatributo desactiva su texto de entrada y los usuarios ya no pueden cambiarlo.
El disabledatributo no solo hará que su texto de entrada esté deshabilitado (inmutable) sino que tampoco se puede enviar .

Enfoque jQuery (1):

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

Enfoque jQuery (2):

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

Enfoque de JavaScript:

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PD propintroducido con jQuery 1.6.

Elyas Hadizadeh
fuente

0

Dado

<input name="foo" type="text" value="foo" readonly />

esto funciona - (jquery 1.7.1)

$('input[name="foo"]').prop('readonly', true);

probado con readonly y readOnly, ambos funcionaron.

NAVNEET CHANDAN
fuente

-1

Tal vez use el atributo deshabilitado:

<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />

O simplemente use la etiqueta de etiqueta:;)

<label>

IProblemFactory
fuente

1

La pregunta decía "Con jQuery" (lo que implica que debe hacerse dinámicamente) y "solo lectura" (que es diferente a deshabilitado).

Quentin

-1

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <div>
        <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
    </div>
</body>

<script type="text/javascript">
    $(function()
    {
        $('#fieldName').attr('disabled', 'disabled');

    });
</script>
</html>

Raghav
fuente

-1

Quizás sea significativo también agregar que

$('#fieldName').prop('readonly',false);

se puede usar como una opción de alternar.

Josh Pule
fuente

Intenté esto con jQuery 3.3.1 y simplemente agrega un readonlyatributo al elemento, independientemente del valor pasado. Por lo tanto, su ejemplo terminaría haciendo que el campo de entrada sea de solo lectura, a pesar de establecer aparentemente el valor en falso.

TMN

-1

En JQuery 1.12.1, mi aplicación usa el código:

$('"#raisepay_id"')[0].readOnly=true;

$('"#raisepay_id"')[0].readOnly=false;

y funciona.

PK
fuente

-2

SetReadOnly (estado) es muy útil para formularios, podemos configurar cualquier campo para establecerReadOnly (estado) directamente o desde varias condiciones, pero prefiero usar readOnly para configurar la opacidad en el selector, de lo contrario, attr = 'disabled' también funcionó como el mismo camino.

Ejemplos de solo lectura:

$('input').setReadOnly(true);

o a través de las diferentes codificaciones como

var same = this.checked;
$('input').setReadOnly(same);

aquí estamos usando el valor booleano de estado para establecer y eliminar el atributo de solo lectura de la entrada, dependiendo de un clic en la casilla de verificación.

pixellabme
fuente

los ejemplos anteriores no funcionan: setReadOnly no es una función integrada en jquery ni en ningún navegador

Dave B 84

-3

En html

$('#raisepay_id').attr("readonly", true) 

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

en bootstrap

$('#raisepay_id').attr("disabled", true) 

$("#raisepay_id").prop("disabled",true);

JQuery es una biblioteca cambiante y, a veces, realizan mejoras periódicas. .attr () se usa para obtener atributos de las etiquetas HTML, y si bien es perfectamente funcional .prop () se agregó más tarde para ser más semántico y funciona mejor con atributos sin valor como 'verificado' y 'seleccionado'.

Se recomienda que si está utilizando una versión posterior de JQuery debe usar .prop () siempre que sea posible.

Raja Ram T
fuente

2

He votado en contra porque no tiene sentido. Todo es HTML, JavaScript y Bootstrap usa jQuery, por lo que ese hecho ni siquiera es relevante. Además, deshabilitado y solo lectura son dos cosas diferentes que funcionan independientemente de si se usa Bootstrap o no.

simontemplar

¿Cómo puedo usar jQuery para hacer una entrada de solo lectura?

Respuestas: