如何禁用 HTML 链接

Question

我在 <td> 中有一个链接按钮，我必须禁用它。这适用于 IE，但不适用于 Firefox 和 Chrome。

我尝试了以下所有方法，但无法在 Firefox 上运行（使用 1.4.2 js）：

$(".myLink").attr('disabled', 'disabled');

$(".myLink").attr('disabled', true);

$(".myLink").attr('disabled', 'true');

注意 - 我无法取消注册锚标签的点击功能，因为它是动态注册的。我必须在禁用模式下显示链接。

原文由 Ankit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能禁用链接（以可移植的方式）。您可以使用其中一种技术（每一种都有自己的优点和缺点）。

CSS方式

当大多数浏览器都支持它时，这应该是 正确的方法（但见后文）：

 a.disabled {
 pointer-events: none;
 }

例如，Bootstrap 3.x 就是这样做的。目前（2016 年）只有 Chrome、FireFox 和 Opera（19+）支持它。 Internet Explorer 从版本 11 开始支持此功能，但 不适用于链接， 但它可以在外部元素中使用，例如：

 span.disable-links {
 pointer-events: none;
 }

和：

 <span class="disable-links"><a href="#">...</a></span>

解决方法

我们可能需要为 pointer-events: none ，但是如果我们 重用 disabled 属性而不是 CSS 类呢？ <a> 严格来说不支持 disabled ，但浏览器不会抱怨 未知 属性。使用 disabled 属性 IE 将忽略 pointer-events ，但它会尊重 IE 特定的 disabled 属性；其他符合 CSS 的浏览器将忽略 未知 的 disabled 属性并尊重 pointer-events 。写起来比解释容易：

 a[disabled] {
 pointer-events: none;
 }

IE 11 的另一个选项是将链接元素的 display 设置为 block 或 inline-block ：

 <a style="pointer-events: none; display: inline-block;" href="#">...</a>

请注意，如果您需要支持 IE（并且您可以更改 HTML），这可能是一个 可移植 的解决方案，但是……

所有这一切请注意， pointer-events 仅禁用…指针事件。 链接仍然可以通过键盘导航， 然后您还需要应用此处描述的其他技术之一。

重点

结合上述 CSS 技术，您可以以非标准方式使用 tabindex 来防止元素被聚焦：

 <a href="#" disabled tabindex="-1">...</a>

我从来没有检查过它与许多浏览器的兼容性，那么你可能想在使用它之前自己测试它。它具有无需 JavaScript 即可工作的优势。不幸的是（但很明显） tabindex 不能从 CSS 中改变。

拦截点击

对 JavaScript 函数使用 href ，检查条件（或 disabled 属性本身），以防万一。

 $("td > a").on("click", function(event){
 if ($(this).is("[disabled]")) {
 event.preventDefault();
 }
 });

要禁用链接，请执行以下操作：

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

要重新启用它们：

 $("td > a").removeAttr("disabled");

如果你想代替 .is("[disabled]") 你可以使用 .attr("disabled") != undefined （当属性没有设置时，jQuery 1.6+ 将总是返回 undefined ）但是 is() 更清楚（感谢戴夫斯图尔特的这个提示）。请注意，我在此处以非标准方式使用 disabled 属性，如果您关心这一点，请用类替换属性并将 .is( .is("[disabled]") 替换为 .hasClass("disabled") （添加和使用 addClass() 和 removeClass() 删除）。

Zoltán Tamási 在评论 中指出， “在某些情况下，点击事件已经绑定到某个“真实”函数（例如使用 knockoutjs）。在这种情况下，事件处理程序排序可能会导致一些麻烦。因此，我通过绑定返回来实现禁用链接链接的 touchstart 、 mousedown 和 keydown 事件的错误处理程序。它有一些缺点（它会阻止在链接上开始触摸滚动）“ 但处理键盘事件也有利于防止键盘导航。

请注意，如果未清除 href ，则用户可以手动访问该页面。

清除链接

清除 href 属性。使用此代码，您无需添加事件处理程序，而是更改链接本身。使用此代码禁用链接：

 $("td > a").each(function() {
 this.data("href", this.attr("href"))
 .attr("href", "javascript:void(0)")
 .attr("disabled", "disabled");
 });

而这个重新启用它们：

 $("td > a").each(function() {
 this.attr("href", this.data("href")).removeAttr("disabled");
 });

就我个人而言，我不太喜欢这个解决方案（如果您不必对禁用的链接做更多的事情），但由于跟踪链接的方式多种多样，它 可能 更兼容。

假点击处理程序

添加/删除 return false 的 onclick 函数，链接将不被关注。要禁用链接：

 $("td > a").attr("disabled", "disabled").on("click", function() {
 return false;
 });

要重新启用它们：

 $("td > a").removeAttr("disabled").off("click");

我认为没有理由更喜欢这个解决方案而不是第一个。

造型

样式更加简单，无论您使用什么解决方案来禁用链接，我们都添加了一个 disabled 属性，这样您就可以使用以下 CSS 规则：

 a[disabled] {
 color: gray;
 }

如果您使用的是类而不是属性：

 a.disabled {
 color: gray;
 }

如果您使用的是 UI 框架，您可能会看到 禁用 的链接样式不正确。例如，Bootstrap 3.x 可以处理这种情况，并且按钮的样式正确，带有 disabled 属性和 .disabled 类。相反，如果您正在清除链接（或使用其他 JavaScript 技术之一），您还必须处理样式，因为没有 href 的 <a> 仍然被绘制为启用。

可访问的富 Internet 应用程序 (ARIA)

不要忘记还包括一个属性 aria-disabled="true" 以及 disabled 的属性/类。

原文由 Adriano Repetti 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 css 中得到修复。

 td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

上面的 css 当应用于锚标记时将禁用点击事件。

有关详细信息，请查看此 链接

原文由 Ankit 发布，翻译遵循 CC BY-SA 3.0 许可协议