Wie mache ich ein ausgegrautes HTML-Formular?

Question

Ich möchte eine Gruppe von HTML-Text <input> haben, die alle gleichzeitig ausgegraut (deaktiviert) sein können. Ich möchte auch, dass das gesamte Gebiet, in dem sie sich befinden, irgendwie ausgegraut oder zumindest sichtbar behindert ist. Ich habe solche Dinge in Desktop-Anwendungen gesehen.

Irgendwelche Ideen auf eine einfache/elegante Weise, es zu tun? Ich versuche, jedes zu disabled="disabled" manuell zu setzen, und habe auch einen Bereich, der die <input> 's umgibt, die anzeigt, dass der gesamte Teil des Formulars nicht bearbeitbar ist.

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

1. Alles ist lokal. Ich verwende nicht PHP oder ASP oder etwas ähnliches ... nur HTML, JavaScript und CSS. Auch keine jquery!
2. Ich möchte den „Bereich“ dynamisch mit JavaScript
3. Es ist NICHT ein <form>, nur ein Haufen von <input> ‚s

Answer 1

Der Parameter disabled = "disabled" ist die Standardmethode, und Sie können jQuery verwenden, um alle in einem Feldsatz enthaltenen Formularelemente dynamisch zu deaktivieren (die Standardmethode zum Gruppieren verwandter Formularelemente). im laufenden Betrieb

Alternativ können Sie ein teilweise transparentes div auf dem Feldset platzieren. Dies bietet auch eine gewisse Blockierung der Formularelemente durch Mausklicks, schützt jedoch nicht davor, dass sie mit Tabs versehen werden. Sie sollten die Formularelemente selbst noch deaktivieren.

Answer 2

Sie durch alle Formularelemente Schritt kann aktivieren/deaktivieren und deaktivieren. Ungeprüfte, sondern versuchen, so etwas wie diese:

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

Answer 3

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 jedes Element deaktivieren .. dann die Farbe des umgebenden Elements

Answer 4

Hintergrund ändern können Sie 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 hoffe, dass dies funktionieren wird :)

Answer 5

Wenn Sie sagen, dass Sie nicht mit der Eigenschaft "disabled" spielen möchten, dann könnten Sie auch ein transparentes DIV über das HTML-Formular positionieren, das (korrekt formatiert) die Form als deaktiviert aussehen lässt form, aber nicht klick/gib irgendwelche Informationen ein ... Dann kannst du, basierend auf einem Event, einfach dieses DIV mit JS entfernen/verstecken und das Formular "aktiviert" machen.

Answer 6

beachten Sie bitte: wenn Sie das tun deaktiviert>

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

was wollen Sie stattdessen zu tun ist:

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

wenn Ihr Formular in einem

ist

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

Does, die den Kuchen schneiden?

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

Answer 7

Die Menschen hier haben Antworten mit Schlaufen - keine Notwendigkeit. Verwenden Sie .children().

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

jsfiddle