Часто возникает необходимость временно деактивировать элементы управления веб-страницы, такие как кнопки или ссылки. Это может быть необходимо, например, когда требуется предотвратить повторное нажатие кнопки до завершения обработки предыдущего нажатия, или когда некоторые функции сайта временно недоступны.
Для решения этой задачи обычно используются фреймворки jQuery и Bootstrap. В основе решения лежит изменение состояния элемента и его визуальное отображение.
Деактивация и активация кнопок
Для деактивации кнопки в Bootstrap достаточно добавить к ней класс disabled. Это изменит внешний вид кнопки, отражая ее неактивное состояние. Однако, это не остановит обработку событий нажатия на кнопку.
<button class="btn btn-primary disabled">Кнопка</button>
Чтобы полностью деактивировать кнопку, в том числе и обработку событий нажатия, следует использовать атрибут disabled.
<button class="btn btn-primary" disabled>Кнопка</button>
Активация кнопки происходит путем удаления класса disabled и атрибута disabled. Это можно сделать с помощью jQuery.
$(".btn").removeClass("disabled").prop("disabled", false);
Деактивация и активация ссылок
Ссылки обрабатываются немного иначе, поскольку у них нет атрибута disabled. Для деактивации ссылки, стилизованной как кнопка, можно использовать класс disabled Bootstrap и предотвратить обработку события нажатия с помощью jQuery.
<a href="#" class="btn btn-primary disabled">Ссылка</a>
$("a.disabled").click(function(e) {
e.preventDefault();
});
Для активации ссылки достаточно удалить класс disabled и перестать предотвратить событие нажатия.
$("a.disabled").removeClass("disabled").off("click");
Таким образом, с помощью несложных манипуляций с классами и атрибутами, можно управлять активностью кнопок и ссылок на веб-странице.
Добавить комментарий