如何禁用HTML链接

Question

我有一个<td>必须禁用的链接按钮。这适用于IE，但不适用于Firefox和Chrome。结构是-
内的链接<td>。我无法在中添加任何容器<td>（例如div / span）

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

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

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

Answer 1

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

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

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>

解决方法

我们可能需要为其定义CSS类，pointer-events:none但是如果我们重用该disabled属性而不是CSS类该怎么办？严格来说disabled不支持，<a>但浏览器不会抱怨 未知
属性。使用disabledIE属性将被忽略，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更改。

拦截点击

使用hrefJavaScript函数，检查条件（或禁用的属性本身），以防万一。

$("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（undefined未设置属性时，jQuery 1.6+将始终返回），但is()更加清晰。请注意，这里我disabled以一种非标准的方式使用属性，如果您对此很在意，则将属性替换为类，并替换.is("[disabled]")为.hasClass("disabled")（使用addClass()和添加和删​​除removeClass()）。

指出：
“在某些情况下，单击事件已绑定到某些“实际”功能（例如，使用基因敲除js）。在这种情况下，事件处理程序的排序可能会引起一些麻烦。因此，我通过绑定返回来实现禁用的链接假处理程序的链接的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");
});

我个人不太喜欢这种解决方案（如果您不必对禁用的链接做更多的事情），但是由于遵循链接的方式多种多样，因此它 可能 更具兼容性。

假点击处理程序

onclick在您添加/删除功能的地方return false，将不会跟随链接。禁用链接：

$("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框架，则可能会看到禁用链接的样式不正确。例如，Bootstrap3.x可以处理这种情况，并且可以正确地使用disabled属性和.disabled类对按钮进行样式设置。相反，如果您要清除链接（或使用其他JavaScript技术之一），则还必须处理样式，因为一个<a>不带href的仍被标记为启用。

可访问的富互联网应用（ARIA）

不要忘了还包括一个属性aria-disabled="true"连同disabled属性/类。