HTML Anchor 标记是不是应该尊重 Disabled 属性？

Posted 2023-02-21

【中文标题】HTML Anchor 标记是不是应该尊重 Disabled 属性？

【英文标题】：Should the HTML Anchor Tag Honor the Disabled Attribute?HTML Anchor 标记是否应该尊重 Disabled 属性？

【发布时间】：2011-10-23 11:25:36

【问题描述】：

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

我创建了一个fiddle 来演示。

在 IE9 中，链接显示为灰色，并且不会传输到 HREF 位置。 在 Chrome/FF/Safari 中，链接为正常颜色，并将转移到 HREF 位置。

正确的行为应该是什么？ IE9 渲染是否不正确，我应该实现一些 CSS 和 javascript 来修复它；还是 Chrome/FF/Safari 不正确，最终会赶上来？

提前致谢。

【参考方案1】：

我必须在一个站点中修复这个行为每个锚点的代码单独，这将对所有锚点起作用：

$('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;

【讨论】：

哇。这太棒了，应该标记为答案！这怎么会有零赞成票？！我已经开始实际修改当前答案以执行您正在做的事情，而最初没有阅读 0 upvote 答案！但是为什么你的 css 选择器不是 [disabled=disabled]，为什么不在你的 jQuery 中使用相同的选择器。

它不应该被标记为答案，因为它不是一个。每当文档中任何地方的“禁用”属性发生变化时，您都需要运行此代码。

Jaroslav，您只需要为每个锚点运行一次。无论如何，我同意这不是这篇文章中问题的答案。我只是觉得它可能对其他人有用。

"a[disabled=disabled]" 只会选择<a disabled="disabled" …>，它不会选择<a disabled …>（这是编写disabled属性的有效方式，如果它实际上被允许的话在a 元素上）

【参考方案2】：

在这种情况下，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/

【讨论】：

感谢您的解释。您展示的 JS 与我为其他浏览器所做的类似。它也适用于 IE，所以也许我会朝那个方向发展。

这个答案指的是规范的错误部分：dev.w3.org/html5/spec/Overview.html#the-link-element 涵盖了<link>，而不是锚元素<a>。 w3.org/html/wg/drafts/html/master/… 表明disabled 没有为任何一个指定。

【参考方案3】：

disabled 是一个属性，仅适用于 standards 中的 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 中的所有锚标记，但我的示例显示了如何仅针对一个特定元素执行此操作。您想确保获得元素的正确客户端 ID，但这对我有用，不止一次。这也适用于在浏览器中呈现时最终成为锚标记元素的 asp:LinkBut​​tons。