Как сделать не активной кнопку после одного нажатия?

Question

[viktorulyushev]

Есть кнопка сделаная через ссылку,как сделать так чтобы после нажатия один раз по этому блоку,этот блок становился не активным?

<div class="cart-full-mobile-buttons">
       <a id="send_button"  class="btn btn-middle btn-submit"  >Оформить</a>
</div>

Answer 1

[Ilya1791]

Вариант 1. В контейнер рядом с ссылкой помещаете прозрачный div с абсолютным позиционированием, чтобы он закрывал собой полностью ссылку, делаете ему стиль display: none. При нажатии на эту ссылку стиль меняется на display: block.
Вариант 2. Обращаетесь к id кнопки через делегирование, где после выполнения вашего кода id кнопки будет удаляться, и она станет неактивна, то есть:

$(document).ready(function () {
            $("body").on('click', '#send_button', function () {
                //Ваш код
                $(this).removeAttr("id");
            });
        });

Comments

[viktorulyushev]

а как добавлять свойство pointer-events: none; для кнопки после нажатия?так прокатит?

[Ilya1791]

viktorulyushev: Да, тогда можно обойтись без удаления атрибутов

$(document).ready(function () {
            $("#send_button").on('click', function () {
                //Ваш код
                $(this).css("pointer-events","none");
            });
        });

Answer 2

[Матвей Мамонов]

let e = document.querySelector(".cart-full-mobile-buttons #send_button");
e.addEventListener("click", (event) => {e.disabled = true});