Отключение кнопок в Bootstrap с помощью JavaScript/JQuery

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

Для быстрого отключения кнопки в Bootstrap, задайте ей атрибут disabled. В JavaScript свойство disabled кнопки измените на true.

Пример в JavaScript:

// Кнопка не реагирует на нажатия
document.querySelector('.btn').disabled = true;

В HTML достаточно добавить disabled:

<!-- Кнопка отключена -->
<button class="btn" disabled>Неактивная кнопка</button>

Таким образом кнопка становится неактивной и визуально отличается от активных, что соответствует стилизации неактивных элементов в Bootstrap.

Подробнее об атрибуте disabled

Атрибут disabled обладает большим функционалом, чем кажется на первый взгляд. Он изменяет не только внешний вид элемента, делая его менее выразительным, но и блокирует взаимодействие пользователя с элементом. Однако нужно отметить, что ссылки <a> изначально не реагируют на атрибут disabled. В этих случаях используйте класс .disabled для визуальной согласованности и явной блокировки кликов через обработчики событий:

let anchorButton = document.querySelector('.btn-link');
anchorButton.classList.add('disabled');
// Защита от нежелательных нажатий включена!
anchorButton.addEventListener('click', function(event) {
  event.preventDefault();
});

Обеспечение схожего поведения в различных браузерах

От Firefox до Chrome поведение элементов с атрибутом disabled предсказуемо. Всё же, всегда стоит делать тщательную проверку:

1. Тестирование во всех поддерживаемых браузерах.
2. Обновление атрибутов доступности, например aria-disabled.
3. Для элементов <input> используйте .prop('disabled', true) или напрямую атрибут disabled.
4. Проверьте, что все сопутствующие обработчики событий на JavaScript также отключены или не способны вызвать действия при отключенной кнопке.

Мастерство использования атрибута disabled

Конечно, можно просто задать disabled и забыть об этом, но мастерство управления состоянием отключения требует более детализированного подхода:

• Условное отключение: деактивируйте кнопку в зависимости от результатов валидации:

// Кнопка работает корректно.
function updateButtonState(button, isValid) {
  button.disabled = !isValid;
}

• Переключение активации в зависимости от изменения условий:

// Кнопка возвращена в строй!
document.querySelector('.btn').disabled = false;

• При использовании фреймворков например React, необходимо связать состояние отключения кнопки с состоянием компонента:

// Кнопка чётко реагирует на смену состояния, как истинный компонент
<button disabled={this.state.isButtonDisabled}>Нажми меня</button>

Раскрытие всего потенциала отключения кнопки

Следуя этим профессиональным рекомендациям, вы раскроете полный потенциал отключения кнопки:

• В jQuery следует использовать метод .prop() для деактивации. Метод .attr() не подходит.
• Для визуального отключения элементов <div> применяйте класс .disabled, не забывая однако, что он не блокирует взаимодействие с элементом:

// Визуально неактивен, но на деле это не так
document.querySelector('.btn').classList.add('btn-disabled');

• Применяйте стили CSS для [disabled] и .disabled, чтобы подчеркнуть неактивность кнопки и создать единое визуальное впечатление.

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

Простая аналогия: представьте кнопку как светофор:

Bootstrap кнопка (🚦): [Активна, Неактивна]

Зеленый (🟢): Кнопка работает, нажатия пользователя инициируют действие.

🚦: [🟢, 🚫]

Красный (🔴): Кнопка находится в ожидающем состоянии, нажатия не влияют на её состояние.

🚦: [🚫, 🔴]

Визуальный дизайн сочетается с пользовательским интерфейсом, по аналогии с работой платных дорог.

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

1. Element: setAttribute() method – Web APIs | MDN — Применение метода .setAttribute() в JavaScript.
2. Buttons · Bootstrap v4.6 — Структура и стилизация кнопок в Bootstrap.
3. .prop() | jQuery API Documentation — Всё о методе .prop() в jQuery для управления DOM свойствами.
4. HTML DOM Button disabled Property — Практический пример отключения кнопок на W3Schools.
5. :disabled | CSS-Tricks – CSS-Tricks — Стиль для неактивных элементов при помощи селектора :disabled от CSS.
6. Element: classList property – Web APIs | MDN — Применение метода .classList для управления классами, такими как .disabled.