Question

我想知道是否可以使用此功能禁用链接：

<a id="link" href=""></a>
$("#link").attr("disabled", false)

这适用于按钮，但不适用于<a>标签。

我知道可以这样做：

$('#link').click(function(e) {
    e.preventDefault();
});

或者甚至完全删除href，但使用我的系统无法正常工作，删除href会导致严重的问题。

问题是，是否有一种方法可以仅禁用标签，即使其无法点击/激活并重新激活它，就像我们对按钮进行.attr("disabled", false)一样？

Answer 1

您可以使用CSS将pointer-events设置为none：

$('#remove').click(function(){
  $('#link').css({'pointer-events': 'auto', 'text-decoration': 'underline'});
});

#link{
  pointer-events: none;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="link" href="https://stackoverflow.com/">Stackoverflow</a>

<button id="remove">Enable Link</button>

Answer 2

您可以为此使用指针事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<script type="text/javascript">
function toggle() {
    var link = document.getElementById("link");
    link.setAttribute("disabled", link.getAttribute("disabled") != "true");
}
</script>

<style type="text/css">
a[disabled="true"] {
    color: lightgray;
    text-decoration: line-through;
    pointer-events: none;
}
</style>

</head>
<body>
    <a id="link" href="http://stackoverflow.com">Link</a>
    <button onclick="toggle()">Disable/Enable</button>
</body>
</html>

使用禁用的attr禁用链接

2 个答案: