Должна ли HTML-привязка признавать атрибут Disabled?

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

Я продемонстрировал fiddle.

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

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

Спасибо заранее.

Ответ 1

В этом случае IE работает некорректно.

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

Отключенный атрибут IDL применяется только к ссылкам таблицы стилей. Когда элемент ссылки определяет ссылку таблицы стилей, затем отключенный атрибут ведет себя так, как определено для альтернативных таблиц стилей DOM. Для всех остальных link всегда возвращает 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

ИЗМЕНИТЬ

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

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

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

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

Ответ 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;
}

Ответ 3

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

Ответ 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, которые в конечном итоге становятся элементами привязки тегов при визуализации в браузере.