¿Cómo hacer un formulario HTML en gris?

Question

Me gustaría tener un grupo de texto HTML <input> que pueden estar atenuados (inhabilitados) al mismo tiempo. También quiero que todo el área en la que se encuentren esté atenuada o al menos visiblemente deshabilitada. He visto cosas como esta en aplicaciones de escritorio.

¿Alguna idea sobre una forma fácil/elegante de hacerlo? Estoy tratando de evitar establecer manualmente cada uno en disabled="disabled", y también tengo un área que rodea el <input> que indica que toda la porción del formulario no es editable.

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

1. Todo es local. No estoy usando PHP o ASP ni nada de eso ... solo HTML, JavaScript y CSS. ¡También no jquery!
2. Deseo activar/desactivar la "zona" de forma dinámica con JavaScript
3. ¡No es una <form>, sólo un montón de <input> 's

Answer 1

El parámetro disabled = "disabled" es la manera estándar de hacerlo, y podría usar algo como jQuery para deshabilitar dinámicamente todos los elementos de formulario contenidos en un fieldset (que es la forma estándar de agrupar elementos de formulario relacionados) sobre la marcha.

Alternativamente, podría colocar un div parcialmente transparente en la parte superior del fieldset. Esto también proporcionará cierto bloqueo de los elementos del formulario a partir de los clics del mouse, pero no protegerá contra las pestañas hacia ellos. Aún debe desactivar los elementos del formulario.

Answer 2

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 3

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 que rodea

Answer 4

Puede basta con utilizar 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 la salida, así que espero que esto funcionará :)

Answer 5

Si dices que no quieres jugar con la propiedad "disabled", también puedes colocar un DIV transparente sobre el formulario HTML, que (con el estilo adecuado) podría hacer que la apariencia se deshabilite: los usuarios podrán ver el formulario, pero no haga clic/ingrese ninguna información en él ... Entonces, basado en algún evento, simplemente puede eliminar/ocultar este DIV con JS y hacer que el formulario "habilitado".

Answer 6

note por favor: si lo hace desactivado>

no se transmitirá el elemento de entrada si el usuario envía el 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;"> 

¿Eso cortar el pastel?

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

Answer 7

La gente aquí tiene respuestas con bucles - no es necesario. Use .children().

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

jsfiddle