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

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

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

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

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

источник

2010-09-24 Tony R

вы хотите '' элементов отключены со статической HTML или динамически отключить с помощью Javascript или что-то делать? В какой-то мере я изучил динамические формы в [этом вопросе] (http://stackoverflow.com/questions/3398603/how-to-create-a-dynamic-form-using-jquery/3408517#3408517); даже создал плагин [jQuery] (http://github.com/macek/jquery-input-depends-on). –

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

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

источник

2010-09-24 18:26:37 Powertieke

Я попытался отключить все входы на submit. Это вызвало проблемы с MVC3. Он не будет правильно возвращать модель, когда я отключу все в форме. – user1003221

по умолчанию, отключенные элементы HTML не распространяют свои значения на запрос на отправку. Используйте readonly, если это не желательно. – Filip

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

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

источник

2010-09-24 18:24:44 Brad

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

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

источник

2010-09-24 18:24:49 lando

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


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

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

источник

2010-09-24 18:24:59 Ventus

Этот код работает. – Samarland

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

источник

2010-09-24 18:25:47 Laimoncijus

Мне нравится эта идея для «седеющей» области. Как сделать div float над другой областью? Я только делал линейные div ... –

Вы можете сделать это, используя абсолютное/относительное позиционирование CSS. Их можно напрямую настроить через JS или использовать некоторую библиотеку JS, такую как jQuery, что упрощает работу ... – Laimoncijus

пожалуйста заметьте: если вы инвалидов>

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

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

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

если форма находится внутри, что разрезать торт на

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

Does?

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

источник

2017-01-10 09:19:33 canoodle

Не должно ли оно быть readonly = "true"? –

Он хочет сделать его серым. 'readonly' не делает этого, он только отключает управление клавиатурой. – Thielicious

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

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

jsfiddle

источник

2017-08-18 20:51:41 Thielicious

ответ

Смежные вопросы