Come fare un modulo HTML in grigio?

Question

Mi piacerebbe avere un gruppo di HTML di testo <input> che può essere tutto in grigio (disattivato) allo stesso tempo. Voglio che anche l'intera area sono in qualche modo ad essere in grigio o almeno visibilmente disabile. Ho visto cose del genere fatto in applicazioni desktop.

Tutte le idee su un modo semplice / elegante per farlo? Sto cercando di evitare di impostare ciascuno per disabled="disabled" manualmente, e hanno anche un Area che circonda i di <input> che indica che tutta la porzione della forma non è modificabile.

EDIT: Scusate, vorrei ricordare un paio di cose ...

1. Tutto è locale. Non sto usando PHP o ASP o qualcosa di simile ... solo HTML, JavaScript e CSS. Inoltre non jquery!
2. Voglio attivare / disattivare la "zona" in modo dinamico con JavaScript
3. Non è un <form>, solo un mucchio di di <input>

Answer 1

I = disabili parametro "disabile" è il modo standard per fare questo, e si potrebbe usare qualcosa come jQuery per disabilitare in modo dinamico tutti gli elementi del modulo contenuto in un fieldset (che è il modo standard di raggruppare elementi del modulo correlati) su la mosca.

In alternativa si potrebbe mettere un div parzialmente trasparente sulla parte superiore del fieldset. Ciò fornirà anche alcuni bloccaggio degli elementi del modulo di clic del mouse, ma non protegge contro tabulazione loro. Si dovrebbe comunque disabilitare gli elementi del modulo stessi.

Answer 2

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

loop attraverso gli elementi della forma con il nome FormName e disattivare ogni elemento .. poi modificare il colore del circostante elemento

sfondo

Answer 3

Si prega di notare: se si fa     disabilitato>

dell'ingresso elemento non verrà trasmessa se le sottomette utente del modulo.

ciò che si vuole fare, invece è:

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

se il modulo è all'interno di un

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

fa che tagliare la torta?

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

Answer 4

Si può semplicemente utilizzare jQuery per disabilitare tutte le forme elementi in quella zona, come:

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

non ho controllato, quindi spero che questo funzionerà:)

Answer 5

Se dici che non vuoi giocare con "disabilitato" proprietà - allora si potrebbe anche posizionare alcuni DIV trasparente sopra form HTML, che (in stile correttamente) potrebbe fare forma sguardo come disabili - gli utenti saranno in grado di vedere la la forma, ma non cliccare / inserire alcuna informazione in esso ... Quindi, in base a qualche evento, si può semplicemente rimuovere / nascondere questo DIV con JS e rendere la forma "abilitato".

Answer 6

È possibile scorrere tutti gli elementi del modulo e disattivarli. Non testato, ma provare qualcosa di simile:

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

Answer 7

La gente qui ha risposte con loop - non è necessario. Usa .children().

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

jsfiddle