Установка атрибута, отключенного на элементе SPAN, не предотвращает события щелчка

Question

У меня есть элемент <span>, который что-то делает с событием щелчка.

Когда я отключаю его, используя jQuery:

$("span").attr("disabled", true);

Обработчик событий продолжает вызываться, когда я щелкаю элемент span.

Я тестирую в Chrome 13. Есть мысли?

Answer 1

Попробуйте это:

$("span").css("pointer-events", "none");

вы можете включить их обратно

$("span").css("pointer-events", "auto");

Answer 2

Атрибут disabled не является глобальным и разрешен только для элементов управления формы. То, что вы могли бы сделать, это установить пользовательский атрибут данных (возможно, data-disabled) и проверить этот атрибут при обработке события нажатия.

Answer 3

Попробуйте отменить привязку события.

$("span").click(function(){
alert($(this).text());
    $("span").not($(this)).unbind('click');
});

Вот скрипка

Answer 4

Стандартное поведение отключенного атрибута имеет место только для элементов формы. Попробуйте отменить привязку события:

$("span").unbind("click");

Answer 5

Есть подвох, что я использовал:

Я использую загрузчик, поэтому я просто добавил .disabled класс к элементу, который я хочу отключить. Bootstrap обрабатывает все остальное.

Сердечно приветствуем это предложение.

Добавление класса во время выполнения:

$('#element').addClass('disabled');

Answer 6

Лучший способ - обернуть диапазон внутри кнопки и отключить кнопку

$("#buttonD").click(function(){
  alert("button clicked");
})

$("#buttonS").click(function(){
  alert("span clicked");
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-success" disabled="disabled" id="buttonD">
    <span>Disabled button</span>
</button>

<br>
<br>

 <span class="btn btn-danger" disabled="disabled" id="buttonS">Disabled span</span>