Como hacer un formulario HTML en gris?

Question

Me gustaría tener un grupo de <input> de texto HTML que pueden ser todo en gris (desactivado) al mismo tiempo. También quiero toda la zona que están en alguna manera a ser de color gris o al menos visiblemente discapacitados. He visto cosas como esta hecho en las aplicaciones de escritorio.

Cualquier idea en una forma fácil / elegante de hacerlo? Estoy tratando de evitar manualmente la configuración de cada a disabled="disabled", y también tienen un área que rodea la década de <input> que indica que toda porción de la forma es no editable.

Edit: Lo siento, debo mencionar unas cuantas cosas más ...

1. Todo es local. No estoy usando PHP o ASP o algo por el estilo ... sólo HTML, JavaScript y CSS. También hay jQuery!
2. Quiero activar / desactivar la "zona" de forma dinámica con JavaScript
3. No es un <form>, sólo un montón de de <input>

Answer 1

Los = discapacitadas parámetro "desactivado" es la manera estándar de hacer esto, y usted podría utilizar algo como jQuery para dinámicamente desactivar todos los elementos de la forma contenida en un conjunto de campos (que es la forma estándar de la agrupación de elementos de formulario relacionados) en la marcha.

Alternativamente, usted podría colocar un div parcialmente transparente en la parte superior del grupo de campos. Esto también proporcionará algún bloqueo de los elementos de la forma de clics del ratón, pero no protege contra la tabulación a ellos. Aún debe desactivar los elementos de formulario mismos.

Answer 2

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

bucles a través de los elementos del formulario con el nombre FormName y desactivar cada elemento .. a continuación, cambiar el color de fondo del elemento

rodea

Answer 3

Note por favor: si lo hace desactivado>

el elemento de entrada no se transmitirá si los somete de usuario del formulario.

lo que quiere hacer en su lugar es:

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

si el formulario está dentro de un

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

¿Tiene que cortar el pastel?

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

Answer 4

Usted simplemente puede usar jQuery para desactivar todas las formas elementos en esa zona, como:

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

Yo no comprobó que, por lo que espero que esto funcionará:)

Answer 5

Si usted dice que no quiere jugar con la propiedad "desactivado" - entonces usted podría también colocar algunos DIV transparente sobre formulario HTML, que (estilo correctamente) podría hacer que forma mirada como discapacitados - los usuarios podrán ver el forma, pero no haga clic / entrar cualquier información en ella ... Luego, basándose en algún evento, puede simplemente eliminar / ocultar este DIV con JS y hacer que la forma "activada".

Answer 6

Puede desplazarse por todos los elementos del formulario y desactivarlos. No probado, pero intentar algo como esto:

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

Answer 7

Aquí la gente tiene respuestas con bucles - no es necesario. Uso .children().

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

jsFiddle