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

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

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

EDIT: Извините, я должен упомянуть еще несколько вещей...

  • Все локально. Я не использую PHP или ASP или что-то в этом роде... просто HTML, JavaScript и CSS. Также нет jquery!
  • Я хочу динамически активировать/отключать "area" с помощью JavaScript
  • Это не a <form>, а всего лишь пучок <input>

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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


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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

то, что вы хотите сделать, это:

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

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

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

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

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

Ответ 7

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

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

jsfiddle