Отключить привязки в Chrome / WebKit / Safari

Question

Рассмотрим следующий код:

$("a").attr("disabled", "disabled");

В IE и FF это сделает якоря неприкосновенными, но в браузерах на основе WebKit (Google Chrome и Safari) это ничего не делает Приятной особенностью атрибута disabled является то, что он легко удаляется и не влияет на атрибуты href и onclick.

Есть ли у вас какие-либо предложения о том, как получить желаемый результат. Ответы должны быть:

• Легко быть обратимым, поскольку я хочу отключить элементы управления вводом формы во время выполнения вызова AJAX.
• Должен работать в IE, FF и WebKit

Answer 1

Я предполагаю, что у вас есть обработчик события onclick, связанный с этими элементами привязки. Просто попросите ваш обработчик событий проверить атрибут «disabled» и отменить событие, если оно установлено. Ваш обработчик событий будет выглядеть примерно так:

$("a").click(function(event){
  if (this.disabled) {
    event.preventDefault();
  } else {
    // make your AJAX call or whatever else you want
  }
});

Вы также можете установить правило таблицы стилей для изменения курсора.

a[disabled=disabled] { cursor: wait; }

Редактировать - упростила проверку «отключен», как предложено в комментариях.

Answer 2

Мне пришлось исправить это поведение на сайте с большим количеством якорей, которые были включены / отключены с помощью этого атрибута в соответствии с другими условиями и т. Д. Может быть, не идеал, но в такой ситуации, если вы предпочитаете не исправлять код каждого якоря в отдельности, это поможет всем якорям:

$('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

И

a[disabled] {
    color: gray;
    text-decoration: none;
}