Как сделать серую форму HTML?

Question

Я хотел бы иметь группу HTML-текста <input>, которые могут быть одновременно выделены серым цветом (отключены).Я также хочу, чтобы вся область, в которой они находятся, была как-то закрашена серым цветом или, по крайней мере, заметно отключена.Я видел подобные вещи в настольных приложениях.

Есть идеи по поводу простого / элегантного способа сделать это?Я стараюсь избегать установки каждого из них на disabled="disabled", а также иметь область , окружающую <input>, что указывает на то, что вся часть формы недоступна для редактирования.

РЕДАКТИРОВАТЬ: Извините, я должен упомянуть еще несколько вещей ...

1. Все локально.Я не использую PHP или ASP или что-то в этом роде ... просто HTML, JavaScript и CSS.Также нет jquery!
2. Я хочу динамически включать / отключать «область» с помощью JavaScript
3. Это НЕ <form>, просто набор <input>

Answer 1

Параметр disabled = "disabled" является стандартным способом сделать это, и вы можете использовать что-то вроде jQuery для динамического отключения всех элементов формы, содержащихся в наборе полей (это стандартный способ группировки связанных элементов формы) на муха.

В качестве альтернативы вы можете поместить частично прозрачный элемент div поверх набора полей. Это также обеспечит некоторую блокировку элементов формы от щелчков мышью, но не защитит от табуляции на них. Вы все равно должны отключить сами элементы формы.

Answer 2

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

проходит по элементам формы с именем FormName и отключает каждый элемент .. затем изменяет цвет фона окружающего элемента

Answer 3

обратите внимание: если вы отключили>

, элемент ввода не будет передан, если пользователь отправит форму.

вместо этого вы хотите сделать:

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

если ваша форма находится внутри

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

Это разрезает торт?

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

Answer 4

Если вы говорите, что не хотите играть со свойством «disabled» - тогда вы также можете расположить прозрачную DIV поверх HTML-формы, которая (при правильном оформлении) может сделать форму отключенной - пользователи смогут видеть формы, но не нажимайте / не вводите в нее какую-либо информацию ... Затем, основываясь на каком-либо событии, вы можете просто удалить / скрыть этот DIV с помощью JS и сделать форму "включенной".

Answer 5

Вы можете просто использовать jQuery, чтобы отключить все элементы форм в этой области, например:

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

Я не проверял, поэтому надеюсь, что это сработает:)

Answer 6

Люди здесь имеют ответы с петлями - не нужно.Используйте .children().

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

jsfiddle

Answer 7

Вы можете пройтись по всем элементам формы и отключить их.Не проверено, но попробуйте что-то вроде этого:

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