Как сделать кнопку неактивной html

как сделать кнопку неактивной js

Чтобы сделать кнопку неактивной, нужно добавить ей атрибут disabled :

// создаем кнопку const btn = document.createElement('button'); // добавляем ей атрибут disabled btn.setAttribute('disabled', ''); // добавляем надпись btn.textContent = 'Неактивная кнопка' // добавляем кнопку на страницу document.body.append(btn);

Кнопка будет отображаться серой и недоступной для нажатия. Кроме того, она не может получить фокус путем нажатия на клавишу Tab или другим способом.

Атрибут disabled

Атрибут disabled блокирует элемент HTML формы, то есть делает его неактивным. Является атрибутом без значения.

Блокировка элементов обычно нужна для того, чтобы запретить пользователю менять некоторые значения (которые, тем не менее, должны быть показаны пользователю в виде элементов формы). Иногда элементы блокируют (и снимают блокировку) с помощью JavaSctipt.

Поведение

В случае кнопки ( button или input с атрибутом type в значениях button , reset или submit ) блокировка означает, что на кнопку нельзя будет нажать. В случае с текстовым полем ввода ( input или textarea ) в нем нельзя будет поменять или скопировать текст. В случае с чекбоксами и радио их состояние (отмечено или нет) нельзя будет сменить. В случае с выпадающими списками select нельзя будет сменить выбранный пункт списка.

Заблокированный элемент по умолчанию имеет серый фон. Он также не будет участвовать в переходах клавишей Tab.

Пример . Заблокированная кнопка

Давайте заблокируем кнопку с помощью атрибута disabled . Для сравнения рядом пример незаблокированной кнопки (попробуем на нее нажать):

Пример . Заблокированный чекбокс

А теперь давайте посмотрим на заблокированный флажок чекбокса. Для сравнения рядом смотрим пример не заблокированного флажка:

Пример . Заблокированный и отмеченный чекбокс

Давайте посмотрим, как выглядит заблокированный и отмеченный с помощью атрибута checked флажок чекбокс. Для сравнения рядом обратимся к примеру не заблокированного отмеченного флажка:

Пример . Заблокированный текстовый инпут

А теперь давайте заблокируем инпут. Для сравнения рядом посмотрим пример не заблокированного инпута:

Пример . Заблокированный текстареа

А здесь мы увидим заблокированный текстареа (обратите внимание на то, что размер заблокированного textarea можно менять). Для сравнения рядом обратимся к примеру не заблокированного текстареа:

Привет:) Привет:)

Пример . Заблокированный выпадающий список

Давайте посмотрим как работает заблокированный select . Для сравнения рядом посмотрим пример не заблокированного выпадающего списка:

Смотрите также

псевдокласс disabled ,
который задает стили заблокированному элементу
псевдокласс enabled ,
который задает стили незаблокированному элементу

Атрибут disabled

Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передается на сервер.

Синтаксис

Значения

Значение по умолчанию

По умолчанию это значение выключено.

HTML5 IE Cr Op Sa Fx

    Тег BUTTON, атрибут disabled

Результат данного примера продемонстрирован на рис. 1.

Вид активной и неактивной кнопки

Рис. 1. Вид активной и неактивной кнопки

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Атрибут disabled

Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.