Wie ein abgeblendet HTML-Formular machen?

Question

Ich möchte eine Gruppe von HTML-Text <input> die haben, die alle ausgegraut (deaktiviert) zugleich sein kann. Ich möchte auch den gesamten Bereich sind sie in irgendwie abgeblendet werden oder zumindest sichtbar deaktiviert. Ich habe diese Dinge gesehen, wie in Desktop-Anwendungen durchgeführt.

Irgendwelche Ideen auf eine einfache / elegante Art und Weise, es zu tun? Ich versuche, manuell zu vermeiden jeweils disabled="disabled" Einstellung und habe auch einen Bereich die <input> der Umgebung, die angibt, dass ganzer Teil des Formulars ist nicht editierbar.

EDIT: Sorry, sollte ich noch ein paar Dinge erwähnen ...

1. Alles ist lokal. Ich bin nicht mit PHP oder ASP oder so etwas ... nur HTML, JavaScript und CSS. Auch kein jquery!
2. Ich möchte aktivieren / deaktivieren „Bereich“ dynamisch mit JavaScript
3. Es ist NICHT ein <form>, nur ein Haufen von <input> des

Answer 1

Die disabled = „disabled“ Parameter ist der normale Weg, dies zu tun, und Sie so etwas wie jQuery dynamisch deaktivieren alle Formularelemente, die in einem fieldset verwenden könnte (was der normale Weg ist, die Elemente der Gruppierung verwandter Form) auf die Fliege.

Alternativ können Sie eine teilweise transparente div auf der Oberseite des Fieldset platzieren. Dies wird auch eine Blockierung der Formularelemente aus Mausklicks zur Verfügung stellt, wird aber nicht zum Schutz vor ihnen Tabbing. Sie sollten noch die Formularelemente selbst deaktivieren.

Answer 2

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

Schleifen durch die Elemente der Form mit dem Namen Formnamen und deaktivieren Sie jedes Element .. dann den Hintergrund ändern Farbe des umgebenden Element

Answer 3

Hinweis bitte: wenn Sie das tun Behinderte>

das Eingangselement nicht, wenn der Benutzer das Formular abschickt übertragen werden.

Was wollen Sie stattdessen zu tun ist:

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

Wenn Sie Ihre Form ist in einem

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

Does dass Schnitt der Kuchen?

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

Answer 4

Sie können einfach jQuery verwenden, um alle Formen Elemente in diesem Bereich zu deaktivieren, wie:

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

Ich habe es nicht überprüfen, so dass ich diese Hoffnung funktioniert:)

Answer 5

If you say you don't want to play with "disabled" property - then you could also position some transparent DIV over HTML form, which (styled properly) could make look form as disabled - users will be able to see the form, but not click/enter any information into it... Then, based on some event, you simply can remove/hide this DIV with JS and make the form "enabled".

Answer 6

You can step through all of the form elements and disable them. Untested, but try something like this:

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

Answer 7

People here have answers with loops - no need. Use .children().

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

jsfiddle