Comment faire un grisées formulaire HTML?

StackOverflow https://stackoverflow.com/questions/3789844

Question

Je voudrais avoir un groupe de ce texte de <input> HTML qui peut être tout grisées (désactivé) en même temps. Je veux aussi toute la région, ils sont en quelque sorte à être grisées ou du moins visiblement désactivé. Je l'ai vu des choses comme ça fait dans les applications de bureau.

Toutes les idées sur un moyen facile / élégante de le faire? J'essaie d'éviter la programmation manuelle à disabled="disabled", et ont également une zone entourant les années de <input> qui indique que la partie entière de la forme est non modifiable.

EDIT: Désolé, je dois mentionner quelques choses ...

  1. Tout est local. Je ne suis pas à l'aide PHP ou ASP ou quelque chose comme ça ... juste HTML, JavaScript et CSS. Pas non plus jquery!
  2. Je veux activer / désactiver la « zone » dynamique avec JavaScript
  3. Il est pas un <form>, juste un tas de <input> de
Était-ce utile?

La solution

Les = handicapés paramètre « désactivé » est le moyen standard pour ce faire, et vous pouvez utiliser quelque chose comme jQuery pour tous les désactiver dynamiquement des éléments de formulaire contenu dans un fieldset (ce qui est le moyen standard de regrouper les éléments de formulaire connexes) sur la mouche.

Sinon, vous pouvez placer un div partiellement transparent au-dessus du fieldset. Cela fournira également un certain blocage des éléments de formulaire de clics de souris, mais ne protège pas contre les tabulant. Vous devez désactiver encore les éléments de formulaire eux-mêmes.

Autres conseils

for(i=0; i<document.FormName.elements.length; i++) {
    document.FormName.elements[i].disabled=true;
}
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";

boucles à travers les éléments de la forme avec le nom FormName et désactiver chaque élément .. puis changer la couleur de fond de l'élément entourant

Important: si vous     désactivé>

l'élément d'entrée ne sera pas transmis si le requérant fournit de l'utilisateur sous forme.

ce que vous voulez faire à la place est: 

<input type="text" name="surname" value="Korpela" readonly>

si votre formulaire est dans une balise 

<div style="background-color; grey;">

Est-ce que couper le gâteau?

https://www.cs.tut.fi/~jkorpela /forms/readonly.html

Vous pouvez simplement utiliser jQuery pour désactiver tous les éléments formes dans ce domaine, comme: 


  //assuming that area is a div element with id lets say disabled-area
  $(document).ready(function(){
    $("#disabled-area input").attr("disabled", "disabled");
  });

Je n'ai pas vérifié, donc j'espère que cela fonctionnera:)

Si vous dites que vous ne voulez pas jouer avec la propriété « désactivé » - alors vous pouvez également placer une DIV transparente sur la forme HTML, qui (style bien) pourrait faire sous forme de regard comme personnes handicapées - les utilisateurs seront en mesure de voir la forme, mais pas cliquer / entrer des informations dans ce ... Ensuite, à partir d'un événement, vous pouvez simplement supprimer / cacher DIV avec JS et faire la forme « activée ».

Vous pouvez parcourir tous les éléments de formulaire et les désactiver. Non testé, mais essayer quelque chose comme ceci: 

for (x=0; x<document.YOURFORM.elements.length; x++) {
     document.YOURFORM.elements[x].disabled=true;
}

Les gens ici ont des réponses avec des boucles - pas besoin. Utilisez .children(). 

$('form').children().prop('disabled',true)

jsFiddle

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top