Атрибут disabled
Атрибут disabled блокирует элемент HTML формы, то есть делает его неактивным. Является атрибутом без значения.
Блокировка элементов обычно нужна для того, чтобы запретить пользователю менять некоторые значения (которые, тем не менее, должны быть показаны пользователю в виде элементов формы). Иногда элементы блокируют (и снимают блокировку) с помощью JavaSctipt.
Поведение
В случае кнопки ( button или input с атрибутом type в значениях button , reset или submit ) блокировка означает, что на кнопку нельзя будет нажать. В случае с текстовым полем ввода ( input или textarea ) в нем нельзя будет поменять или скопировать текст. В случае с чекбоксами и радио их состояние (отмечено или нет) нельзя будет сменить. В случае с выпадающими списками select нельзя будет сменить выбранный пункт списка.
Заблокированный элемент по умолчанию имеет серый фон. Он также не будет участвовать в переходах клавишей Tab.
Пример . Заблокированная кнопка
Давайте заблокируем кнопку с помощью атрибута disabled . Для сравнения рядом пример незаблокированной кнопки (попробуем на нее нажать):
Пример . Заблокированный чекбокс
А теперь давайте посмотрим на заблокированный флажок чекбокса. Для сравнения рядом смотрим пример не заблокированного флажка:
Пример . Заблокированный и отмеченный чекбокс
Давайте посмотрим, как выглядит заблокированный и отмеченный с помощью атрибута checked флажок чекбокс. Для сравнения рядом обратимся к примеру не заблокированного отмеченного флажка:
Пример . Заблокированный текстовый инпут
А теперь давайте заблокируем инпут. Для сравнения рядом посмотрим пример не заблокированного инпута:
Пример . Заблокированный текстареа
А здесь мы увидим заблокированный текстареа (обратите внимание на то, что размер заблокированного textarea можно менять). Для сравнения рядом обратимся к примеру не заблокированного текстареа:
Пример . Заблокированный выпадающий список
Давайте посмотрим как работает заблокированный select . Для сравнения рядом посмотрим пример не заблокированного выпадающего списка:
Смотрите также
- псевдокласс disabled ,
который задает стили заблокированному элементу - псевдокласс enabled ,
который задает стили незаблокированному элементу
Неактивная кнопка submit (атрибут DISABLED)
Иногда на сайте необходимо сделать форму, в которую пользователь вводит какие-либо данные. Полей в форме может быть сколько угодно, однако всегда есть поля обязательные для заполнения. Как же проверить, заполнил пользователь нужное поле или нет. Есть два пути:
- Проверка в обработчике, т.е. пользователь заполняет нужные поля, отправляет форму, а дальше обработчик проверяет обязательные поля, и если какое либо поле не заполнено – возвращает пользователя обратно. Все просто, однако необходим механизм для передачи значений уже заполненных полей обратно в форму, который можно реализовать с помощью сессий, однако это не очень удобно.
- Проверка методами JavaScript – все гораздо проще (в плане работы самой формы). Задаем каждому полю событие onchange или любое другое реагирующее на действие пользователя (ну не onmouseover конечно, хотя наверное можно сделать даже забавно…), после которого написанная нами функция будет проверять , заполнены ли обязательные поля и разрешать или запрещать кнопку submit.
Первый вариант относится больше к разделу PHP, поэтому пока рассматриваться не будет. Рассмотрим более подробно второй. Первое что нам необходимо – сама форма:
Как видите, у кнопки Submit имеется атрибут disabled в значении disabled. Также у каждого поля формы есть событие onchange, при котором вызывается функция EnableButton(). Что же из себя представляет данная функция? Допустим, полями, обязательными для заполнения, являются field1 и field3, тогда функция EnableButton() будет выглядеть так:
К сожалению, я не нашел в JavaScript аналога PHP функции empty(), поэтому значения полей приходится сравнивать с пустой строкой. Еще на что стоит обратить внимание – оператор with (document.forms.form1). Для тех кто не знаком с JavaScript – выражение в скобках оператора with будет добавляться ко всем объектам, что позволяет значительно сократить запись функции. Без with EnableButton() выглядела бы следующим образом:
Согласитесь – довольно громоздко.
В продолжении стоить отметить, что атрибут disabled можно использовать для любого элемента формы. Пример – заполнение информации о фирме – юридический и почтовый адрес. Два поля для двух адресов, однако можно добавить флажок checkbox (- совпадает с юридическим), отметив который, пользователь укажет что поле почтовый адрес обрабатывать не надо и можно добавить ему атрибут disabled.
Атрибут disabled
Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Заблокированный в поле текст не передается на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию это значение выключено.
HTML5 IE Cr Op Sa Fx
Тег TEXTAREA, атрибут disabled Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Курсы javascript
Наверно, я не полностью сформулировал вопрос. В Chrome и IE сразу после загрузки страницы чекбокс не выделен и поле для текста активно, по крайней мере у меня именно так. Поле становится неактивным, если поставить, а затем снять галочку.
Может я что-то не так делаю? Подскажите.
20.07.2012, 19:07
без статуса
Регистрация: 25.05.2012
Сообщений: 8,219
20.07.2012, 19:09
Регистрация: 03.05.2011
Сообщений: 848
либо так (18 строка), либо нарисуйте атрибут disabled у текстового поля изначально.
20.07.2012, 19:41
Интересующийся
Регистрация: 20.07.2012
Сообщений: 11
Спасибо, получилось с атрибутом disabled.
21.07.2012, 12:08
Интересующийся
Регистрация: 20.07.2012
Сообщений: 11
Еще возник вопрос. Если я таким образом пытаюсь включить несколько подряд инпутов, то это не работает. При этом работает, если ставить галки начиная от последнего элемента к первому по порядку. Работает только отдельно какой-либо из выбранных, а остальные неактивны. Как это реализовать?
Последний раз редактировалось nraw, 21.07.2012 в 12:27 .
21.07.2012, 12:36
Регистрация: 22.03.2012
Сообщений: 3,744
21.07.2012, 14:02
Интересующийся
Регистрация: 20.07.2012
Сообщений: 11
У меня элементы input находятся в ячейках таблицы
поэтому код не работает, а точнее работает частично (только в колонке «Количество»). Если я правильно понял, не работают эти строки?
var inp = target.parentNode.children; var len = inp.length;
Последний раз редактировалось nraw, 21.07.2012 в 14:18 .
21.07.2012, 14:28
что-то знаю
Регистрация: 24.05.2009
Сообщений: 5,176
elem.setAttribute('disabled', 'disabled'); // сделать неактивной elem.removeAttribute('disabled'); // сделать активной // кроссбраузерно
| Страница 1 из 3 | 1 | 2 | 3 | > |