66 votos

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

Tengo la siguiente entrada:

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

¿Cómo puedo utilizar jQuery para hacer de este elemento de sólo-lectura de entrada sin necesidad de cambiar el elemento o su valor?

116voto

Gourneau Puntos 4153

En estos días con jQuery 1.6.1 o por encima de ella se recomienda que .prop() se utiliza para configurar los atributos booleanos/propiedades.

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

71voto

Russ Cam Puntos 58168

basta con añadir el atributo siguiente

// 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 en el elemento (sustituto disabled para readonly en los siguientes para la configuración de readonly de atributo).

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

o

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

NOTA: a partir de jQuery 1.6, se recomienda el uso de .prop() en lugar de .attr(). El código anterior funciona exactamente el mismo, salvo sustituto .attr() para .prop().

55voto

Reem Puntos 669

Para hacer una entrada readonly uso:

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

a asegúrese de lectura/escritura uso:

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

la adición de la disabled de atributo no enviar el valor con el post.

1voto

ProblemFactory Puntos 4470

Tal vez de usar atributo disabled:

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

O simplemente el uso de la etiqueta de la etiqueta: ;)

<label>

0voto

Raghav Khunger Puntos 2273
<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>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X