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

Question

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

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

В IE и FF это сделает якоря unclickable, но в браузерах на основе WebKit (Google Chrome и Safari) это ничего не делает. Хорошая вещь об отключенном атрибуте заключается в том, что он легко удаляется и не влияет на атрибуты 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; 
}