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

Question

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

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

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

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

Answer 1

Параметр «Отключено» - это стандартный способ сделать это, и вы могли бы использовать что-то вроде 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

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

jsfiddle.