Должен ли HTML-тег привязки уважать отключенный атрибут?

Question

Если я создаю HTML-тег привязки и устанавливаю для атрибута disabled значение true, я получаю различное поведение в разных браузерах (удивление! Удивление!).

Я создал скрипку для демонстрации.

В IE9 ссылка неактивна и не переносится в местоположение HREF. В Chrome / FF / Safari ссылка имеет обычный цвет и будет перенесена в местоположение HREF.

Каким должно быть правильное поведение? IE9 отображает это неправильно, и я должен реализовать некоторые CSS и JavaScript, чтобы исправить это; или Chrome / FF / Safari неверен и в конечном итоге наверстает упущенное?

Заранее спасибо.

Answer 1

В этом случае IE работает неправильно.

См. Спецификацию HTML5

Атрибут IDL отключен только для ссылок на таблицы стилей. Когда элемент link определяет ссылку на таблицу стилей, а затем атрибут disabled ведет себя так, как определено для альтернативных таблиц стилей DOM. Для всех остальных элементы ссылки всегда возвращают false и ничего не делают при установке.

http://dev.w3.org/html5/spec/Overview.html#the-link-element

В спецификации HTML4 даже не упоминается disabled

http://www.w3.org/TR/html401/struct/links.html#h-12.2

EDIT

Я думаю, что единственный способ получить этот кросс-браузерный эффект - это js / css следующим образом:

#link{
    text-decoration:none;
    color: #ccc;
}

1025 * JS *

$('#link').click(function(e){
    e.preventDefault();
});

Пример: http://jsfiddle.net/jasongennaro/QGWcn/

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;
}

Answer 3

disabled - это атрибут, который применяется только к input элементам согласно стандартам . IE может поддерживать его на a, но вместо этого вы захотите использовать CSS / JS, если хотите соответствовать стандартам.

Answer 4

Ответ JQuery у меня не сработал, потому что мой якорный тег находится на форме, а в моих формах я использую валидаторы полей asp, и они просто не очень хорошо играли.Это привело меня к поиску довольно простого ответа, который не требует JQuery или CSS ...

<a id="btnSubmit" href="GoSomePlace">Display Text</a>

Вы можете отключить элемент, и он должен вести себя так, как это делают типы ввода.CSS не требуется.Это сработало для меня в chrome и ff.

function DisableButton() {
    var submitButton = document.getElementById("btnSubmit");
    if (submitButton != null) {
        submitButton.setAttribute('disabled', 'disabled');
    }
}

Конечно, вы будете делать цикл, чтобы отключить все теги привязки в DOM, но мой пример показывает, как это сделать длятолько один конкретный элемент.Вы хотите убедиться, что вы получаете правильный идентификатор клиента вашего элемента, но это сработало для меня не раз.Это также будет работать с asp: LinkButtons, которые в конечном итоге становятся элементами тегов привязки при визуализации в браузере.