Comment puis-je utiliser jQuery pour créer une entrée en lecture seule?

142

J'ai l'entrée suivante:

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

Comment puis-je utiliser jQuery pour faire de cet élément une entrée en lecture seule sans changer l'élément ou sa valeur?

jquery useranon
la source

Réponses:

255

De nos jours, avec jQuery 1.6.1 ou supérieur, il est recommandé d'utiliser .prop () lors de la définition des attributs / propriétés booléens.

$("#fieldName").prop("readonly", true);
Gourneau
la source
89

ajoutez simplement l'attribut suivant

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

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

jQuery pour effectuer la modification de l'élément (substitut disabledpour readonlydans ce qui suit pour le réglage readonlyattribut).

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

ou 

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

REMARQUE: à partir de jQuery 1.6, il est recommandé d'utiliser à la .prop()place de .attr(). Le code ci-dessus fonctionnera exactement de la même manière, sauf .attr()pour remplacer .prop().

Russ Cam
la source
4
désactiver un champ n'est pas la même chose que le rendre non modifiable, non? le désactiver le fera également ne pas soumettre
Dave
2
@Dave correct. Les entrées en lecture seule peuvent également être focalisées, les entrées désactivées ne peuvent pas
Russ Cam
75

Pour créer une entrée en lecture seule, utilisez:

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

pour le rendre en lecture / écriture, utilisez:

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

l'ajout de l' disabledattribut n'enverra pas la valeur avec la publication.

Reem
la source
7

Vous pouvez le faire en le marquant simplement disabledou enabled. Vous pouvez utiliser ce code pour ce faire:

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

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

ou

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

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

--- Il vaut mieux utiliser prop au lieu d'attr.

pixellab
la source
7
Les entrées désactivées ne sont pas soumises sur le formulaire post / get.
Nielsvh
4

Utilisez cet exemple pour rendre la zone de texte ReadOnly ou Not.

<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
la source
3

Il existe deux attributs, à savoir readonlyet disabled, qui peuvent créer une entrée semi-en lecture seule. Mais il y a une petite différence entre eux.

<input type="text" readonly />
<input type="text" disabled />
  • le readonly attribut rend votre texte d'entrée désactivé et les utilisateurs ne peuvent plus le modifier.
  • Non seulement l' disabledattribut rendra votre texte d'entrée désactivé (non modifiable), mais il ne peut pas non plus être soumis .

Approche jQuery (1):

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

Approche jQuery (2):

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

Approche JavaScript:

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

PS propintroduit avec jQuery 1.6.

Elyas Hadizadeh
la source
0

Donné -

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

cela fonctionne - (jquery 1.7.1)

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

testé avec readonly et readOnly - les deux ont fonctionné.

NAVNEET CHANDAN
la source
-1

Peut-être utiliser un attribut désactivé:

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

Ou utilisez simplement la balise label:;)

<label>
IProblemFactory
la source
1
La question disait "Avec jQuery" (ce qui implique que cela devrait être fait dynamiquement) et "en lecture seule" (ce qui est différent de désactivé).
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
la source
-1

Il est peut-être significatif d'ajouter également que 

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

peut être utilisé comme option de bascule.

Josh Pule
la source
J'ai essayé cela avec jQuery 3.3.1 et il ajoute simplement un readonlyattribut à l'élément, quelle que soit la valeur passée. Ainsi, votre exemple finirait par rendre le champ d'entrée en lecture seule, bien que la valeur soit apparemment définie sur false.
TMN
-1

Dans JQuery 1.12.1, mon application utilise du code:

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

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

et il fonctionne.

PK
la source
-2

Le setReadOnly (state) est très utile pour les formulaires, nous pouvons définir n'importe quel champ sur setReadOnly (state) directement ou à partir de diverses conditions.Mais je préfère utiliser readOnly pour définir l'opacité du sélecteur sinon l'attr = 'disabled' fonctionnait également comme le de la même façon.

Exemples readOnly:

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

ou à travers les différentes coditions comme

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

ici, nous utilisons la valeur booléenne d'état pour définir et supprimer l'attribut en lecture seule de l'entrée en fonction d'un clic sur la case à cocher.

pixellabme
la source
les exemples ci-dessus ne fonctionnent pas - setReadOnly n'est pas une fonction intégrée à jquery ou à tout autre navigateur
Dave B 84
-3

En html 

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

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

dans bootstrap 

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

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

JQuery est une bibliothèque évolutive et parfois ils apportent des améliorations régulières. .attr () est utilisé pour obtenir des attributs à partir des balises HTML, et bien qu'il soit parfaitement fonctionnel .prop () a été ajouté plus tard pour être plus sémantique et il fonctionne mieux avec des attributs sans valeur comme «vérifié» et «sélectionné».

Il est conseillé que si vous utilisez une version ultérieure de JQuery, vous devez utiliser .prop () chaque fois que possible.

Raja Ram T
la source
2
J'ai voté contre cela parce que c'est insensé. Tout est HTML, JavaScript et Bootstrap utilise jQuery de sorte que ce fait n'est même pas pertinent. De plus, désactivé et lecture seule sont deux choses différentes qui fonctionnent indépendamment du fait que Bootstrap est utilisé ou non.
simontemplar