Comment ajouter un “readonly” attribut à un <input>?

Comment puis-je ajouter readonly à un <input>? .attr('readonly') ne fonctionne pas.

.attr('readonly', true) fonctionne, d'autres ne
.attr('readonly', 'readonly') fonctionne également
Ça dépend de l'DOCTYPE utilisez-vous. Pour DTD HTML 4.01 de la réponse de la CMS est fonctionnel et valide HTML 4.01. Si vous utilisez une DTD XHTML alors la réponse de ceejayoz est travail et XHTML valide.
Il ne dépend pas de doctype, le DOM est la même, qu'il a été lu par HTML ou XML, et en tout cas XHTML est toujours presque toujours en fait servi en tant que HTML n'XML, pour IE compatibilité.

InformationsquelleAutor Qiao | 2009-08-20

522

jQuery <1.9
```
$('#inputId').attr('readonly', true);
```
jQuery 1.9+
```
$('#inputId').prop('readonly', true);
```
Lire plus sur différence entre prop et attr
- Êtes-vous sûr? Je le pensais aussi, mais ne peut pas trouver quelque chose à propos dans les specs. <input name="foo" readonly="readonly" value="barre" /> valide parfaitement à l'validator.w3.org avec xhtml 1.0 strict.
- Ce post devrait être changé .prop() plutôt que .attr(), comme indiqué dans l'API jQuery: jquery.com/upgrade-guide/1.9/#attr-versus-prop-
- L'attribut lecture seule est un "attribut booléen" -- whatwg.org/specs/web-apps/current-work/#boolean-attribute en Dépit de la nature à induire en erreur le nom, les valeurs ne doivent pas être "vrai" ou "faux". Alors que je pense que le code ci-dessus va réellement fonctionner (testé en Chrome avec jQuery 1.8.1), elle peut conduire à plus tard la confusion pour les novices. Aussi, selon le jQuery docs la valeur doit être en nombre ou une chaîne, pas un booléen. api.jquery.com/attr/#attr2
InformationsquelleAutor CMS
147

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

$("#descrip").prop("readonly",false);
```
- Après la lecture de l'API jQuery pour .prop, ce devrait être la accepté de répondre. Je l'avais toujours fait .attr('readonly', 'readonly') et .removeAttr('readonly') dans le passé, mais cela semble plus correct et rend le code plus propre ainsi.
- Tout le monde devrait se servir de cette réponse, comme indiqué ici: jquery.com/upgrade-guide/1.9/#attr-versus-prop-
- Un mot de prudence avec l'aide de $.prop(): Prop va définir l'attribut lecture seule à vide/chaîne vide, donc si vous avez des CSS qui utilise le sélecteur d'attributs pour [readonly="readonly"], alors vous devrez le changer [readonly] (ou comprendre à la fois).
InformationsquelleAutor Greg
26

Readonly est un attribut tel que défini dans le code html, donc le traiter comme tel.

Vous devez avoir quelque chose comme readonly="readonly" dans l'objet que vous travaillez avec, si vous voulez ne pas être modifiable.
Et si vous voulez qu'il soit modifiable à nouveau, vous n'aurez pas quelque chose comme readonly=" (ce n'est pas la norme, si j'ai bien compris). Vous avez vraiment besoin de supprimer l'attribut dans son ensemble.

En tant que tel, tout en utilisant jquery ajout et de retrait c'est ce qui fait sens.

Mettre quelque chose en lecture seule:
```
$("#someId").attr('readonly', 'readonly');
```
Supprimer readonly:
```
$("#someId").removeAttr('readonly');
```
C'était la seule alternative qui a vraiment fonctionné pour moi.
Espérons que cela aide!

InformationsquelleAutor
20

.attr('readonly', 'readonly') devrait faire l'affaire. Votre .attr('readonly') seulement renvoie la valeur, il ne définit pas un.
- jQuery attr() fonctionne sur les propriétés JavaScript, pas les attributs HTML, même si leurs noms l'indiquent le contraire. attr('readonly') est réellement le fonctionnement sur le DOM Niveau 1 HTML propriété en lecture seule, ce qui est un booléen, donc "vrai" est plus approprié. Cependant, la chaîne 'readonly' est aussi un truthy valeur lorsque automatiquement converties en une valeur de type boolean, de sorte que le ci-dessus fonctionne toujours.
- Je ne pense pas que vous voulez définir l'attribut "vrai". Le .attr valeur ne doit être une chaîne ou un nombre, pas un booléen, selon le jQuery docs: api.jquery.com/attr/#attr2 Aussi, HTML "attributs booléens" ne devrait être une chaîne vide, ou de la valeur de l'attribut. Je pense que la solution est d'utiliser .prop() pour éviter toute confusion.
InformationsquelleAutor ceejayoz
16

Je pense que "désactivé" exclut l'entrée d'être envoyé sur le POST
- Oui, c'est fait. J'ai trouvé ce thread alors que la recherche d'une alternative à "désactivé" juste pour cette raison.
- mais vous pouvez l'activer juste avant de l'envoyer , et de désactiver ultérieurement $(document).sur('submit', "#myform", function(e) { //activer les entrées return true; // puis désactivez-le à nouveau si vous avez besoin } il fonctionne je l'ai testé
- Ne lisez seulement les valeurs d'entrée en html sont autorisés à envoyé sur le POST sans l'aide caché ?
InformationsquelleAutor
11

Vous pouvez désactiver la lecture seule à l'aide de la .removeAttr;
```
$('#descrip').removeAttr('readonly');
```
InformationsquelleAutor Steve
5

Pour permettre readonly:
```
$("#descrip").attr("readonly","true");
```
Pour la désactivation readonly
```
$("#descrip").attr("readonly","");
```
- Pourquoi ne pas $("#descrip").removeAttr("readonly");?
- À partir de api.jquery.com/attr "de jQuery 1.6, l' .attr() la méthode renvoie undefined pour les attributs qui n'ont pas été définies. Pour récupérer et modifier les DOM des propriétés telles que le cochée, sélectionnés ou désactivé état de forme des éléments, utilisez la .prop (), méthode".
- L'attribut ne doit pas être réglé sur une chaîne de "vrai". Cela peut fonctionner, mais n'est pas techniquement correct. (Voir mes précédents commentaires ci-dessus.)
- N'utilisez pas cette suggestion, beaucoup mieux disponible ici. "vrai" n'est pas correct pour le réglage, et le retrait est également incorrect.
InformationsquelleAutor Pradeep

Utiliser le setAttribute de la propriété. Remarque dans l'exemple que si 1 sélectionnez appliquer l'attribut lecture seule sur zone de texte, sinon supprimez l'attribut en lecture seule.

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>

InformationsquelleAutor Diogo Rodrigues

-3

Pour la version jQuery < 1.9:
```
$('#inputId').attr('disabled', true);
```
Pour la version jQuery >= 1.9:
```
$('#inputId').prop('disabled', true);
```
InformationsquelleAutor Osman Adak

Vous devez vous connecter pour publier un commentaire.