Включение и отключение кнопки HTML через атрибут 'disabled'

Быстрый ответ

Вот как можно отключить кнопку:

document.getElementById("inputButton").disabled = true; // Кнопка теперь неактивна

А вот как её включить вновь:

document.getElementById("inputButton").disabled = false; // Кнопка снова активна

Если же вы хотите переключаться между этими двумя состояниями:

document.getElementById("inputButton").disabled ^= true; // Переключение активности кнопки

Все возможности атрибута 'disabled'

HTML-атрибут disabled ограничивает взаимодействие пользователя с кнопкой, делая её неактивной.

Использование jQuery

При работе с jQuery обязательно подключите последнюю версию библиотеки.

Чтобы отключить кнопку в jQuery, нужно применить следующий код:

$('#inputButton').prop('disabled', true); // Кнопка теперь отключена

Для включения кнопки используйте этот код:

$('#inputButton').prop('disabled', false); // Кнопка вновь включена

Визуализация

Задумайтесь о кнопке, как об управляющем сигнале, регулирующем движение:

Кнопка ввода: ⏹️🚦🟢 | ⏹️🚦🔴

1. Отключение кнопки – ⏹️🚦🔴 (активность прекращена)
2. Включение кнопки – ⏹️🚦🟢 (активность восстановлена)

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

Лучшие практики и дополнительные рекомендации

Учтите различия между версиями библиотек

Не забывайте, что в разных версиях jQuery применяются разные методы. В версиях до 1.6 использовался метод attr():

// Для jQuery версий до 1.6
$('#inputButton').attr('disabled', 'disabled'); // Старый метод отключения кнопки.

// Для повторного включения кнопки при использовании старых версий
$('#inputButton').removeAttr('disabled'); // Убираем отключение.

Подробнее об этом расскажет наш спикер на видео

Сделайте веб-доступным для всех

Не забывайте о пользователях с особыми потребностями, использующих аудиоридеры или навигацию с клавиатуры. Информируйте их об изменении состояния кнопки с помощью ARIA-атрибутов:

document.getElementById("inputButton").setAttribute("aria-disabled", "true"); // Обеспечиваем доступность.

Интерактивность важнее простого включения и отключения

Помимо изменения состояния кнопки, подумайте о визуальной обратной связи. Сделайте это, изменив стиль или CSS-класс кнопки:

// Отключаем кнопку и меняем её стиль
var btn = document.getElementById("inputButton");
btn.disabled = true;
btn.classList.add("button-disabled"); // Визуализация состояния кнопки.

// Включаем кнопку и возвращаем ей прежний стиль
btn.disabled = false;
btn.classList.remove("button-disabled"); // Восстанавливаем стиль активной кнопки.

Полезные материалы

1. HTMLInputElement – Web APIs | MDN — детальный справочник по элементам ввода в HTML.
2. HTML DOM Button disabled Property — как включить или отключить кнопку, руководство.
3. javascript – Отключение и включение HTML кнопки ввода – Stack Overflow — советы и решения от сообщества разработчиков.
4. HTML атрибут: disabled – HTML: HyperText Markup Language | MDN — информация об атрибуте disabled.
5. Быстрый совет: Добавление или удаление CSS-класса с помощью чистого Javascript — SitePoint — управление CSS-классами с помощью JavaScript.
6. .prop() | jQuery API Documentation — описание метода .prop() в документации jQuery.
7. Введение в события браузера — начало изучения событий в браузере.

Заключительные заметки

Практикуйтесь и экспериментируйте, чтобы совершенствовать свои навыки. Мы верим, что наши рекомендации окажутся полезными. Успехов в программировании!👩‍💻