Question

如果我创建一个HTML锚标记并将disabled属性设置为true，我会在不同的浏览器中获得不同的行为（惊喜！惊喜！）。

我创建了一个fiddle来演示。

在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

修改

我认为跨浏览器获得此效果的唯一方法是js / css如下：

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

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是一个仅适用于standards的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中的所有锚标签，但是我的例子显示了如何只为一个特定元素做这个。您希望确保获得元素的正确客户端ID，但这不仅适用于我。这也适用于asp：LinkButtons，它在浏览器中呈现时最终成为锚标记元素。

HTML Anchor Tag是否应该授予禁用属性？

4 个答案: