如何禁用HTML链接

Question

我在中有一个链接按钮，我必须禁用该按钮。这在IE上有效，但在Firefox和Chrome上不起作用。结构是-Link在中。我不能在中添加任何容器（如div/span）

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


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

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

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

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>

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

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

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

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

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

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

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

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

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

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");
});

就我个人而言，我不喜欢这个解决方案非常（如果你不需要做更多的禁用链接），但它可能更兼容，因为各种方式来遵循一个链接。

添加/删除onclick函数，如果返回false，则不会遵循链接。要禁用链接：

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

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

a[disabled] {
    color: gray;
}

a.disabled {
    color: gray;
}

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

不要忘记还包括属性aria-disabled=“true”和disabled属性/class。