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

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

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

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

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

forms input html disabled-input
person Tony R    schedule 24.09.2010    source источник
comment
Вы хотите, чтобы элементы <input/> были отключены с помощью статического HTML или динамически отключены с помощью javascript или чего-то еще? Я в некоторой степени изучил динамические формы в этот вопрос ; даже создал для него плагин jQuery.   -  person maček    schedule 24.09.2010

Ответы (7)


arrow_upward
26
arrow_downward

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

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

person Powertieke    schedule 24.09.2010
comment
Я попытался отключить все входы при отправке. Похоже, это вызвало проблемы с MVC3. Он не отправил бы модель правильно, когда я отключил все в форме. - person user1003221; 18.05.2012
comment
по умолчанию отключенные элементы HTML не передают свои значения в почтовый запрос. Используйте readonly, если это нежелательно - person Filip; 23.11.2014
comment
Обратите внимание, что ОП прямо сказал, что ему не нужно решение jQuery, поэтому я лично предпочитаю stackoverflow.com/a/3789857/1035977 - person Gwyneth Llewelyn; 22.06.2020

arrow_upward
11
arrow_downward 

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

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

person lando    schedule 24.09.2010

arrow_upward
6
arrow_downward

Обратите внимание: если вы делаете disabled

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

Вместо этого вы хотите:

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

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

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

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

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

person canoodle    schedule 10.01.2017
comment
Он хочет сделать его серым. readonly этого не делает, он только отключает управление клавиатурой. - person Thielicious; 18.08.2017

arrow_upward
2
arrow_downward

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


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

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

person Ventus    schedule 24.09.2010
comment
ОП прямо сказал, что ему не нужно решение jQuery... - person Gwyneth Llewelyn; 22.06.2020

arrow_upward
2
arrow_downward

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

person Laimoncijus    schedule 24.09.2010
comment
Мне нравится эта идея для серого цвета области. Как сделать так, чтобы div плавал над другой областью? Раньше я делал только встроенные div... - person Tony R; 24.09.2010
comment
Вы можете сделать это, используя абсолютное/относительное позиционирование CSS. Их можно настроить напрямую с помощью JS или с помощью какой-либо библиотеки JS, такой как jQuery, что упрощает задачу... - person Laimoncijus; 25.09.2010

arrow_upward
1
arrow_downward

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

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

jsfiddle

person Thielicious    schedule 18.08.2017

arrow_upward
0
arrow_downward

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

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