Question

我想做的是，根据用户的角色，在用户进入时启用或禁用锚元素。尝试几种方法：

document.getElementById('myBtn').disabled = true;

这向我显示：属性“ disabled”在类型“ HTMLElement”中不存在。

研究尝试：

(document.getElementById('myBtn') as any).disabled = true;

它没有显示任何错误，但也不起作用。

具有angular [disabled]的属性，它向我显示：由于它不是'a'的已知属性，因此无法绑定到'disabled'。

有其他选择吗？问候

Answer 1

您不能“禁用”锚标签。资源。 MDN

disabled属性仅适用于表单控件。将其与锚标记（链接）一起使用将无效。

或者，您可以禁用鼠标指针交互。

CSS：

a.disabled-link {
  pointer-events: none;
  cursor: default;
}

HTML：

<a href="foo.html" class="disabled-link">Link</a>

Answer 2

由于链接不包含 disable 属性，因此您可以通过创建类手动进行操作

.link-disabled {
    pointer-events: none;
    color: lightgray;
}

然后您可以添加此类以进行链接

var element = document.getElementById("myBtn");
element.classList.add("link-disabled");

或对于较旧的浏览器：

var element  = document.getElementById("myBtn");
element .className += " link-disabled";

Answer 3

disabled属性可用于大多数与表单相关的元素，例如输入，按钮。 <a>标签不能直接禁用。您必须将pointer-events css属性设置为none。

Answer 4

不幸的是（即使它得到了相对较好的支持）pointer-events是一项非标准功能，我不鼓励使用它。

我会在链接上放置一个透明元素，以防止用户交互。

此元素必须是anchor元素的同级元素。将父级位置设置为relative，兄弟姐妹位置设置为absolute，然后相应地设置兄弟姐妹z-index并使用javascript显示/取消显示遮罩。

Answer 5

没有超链接的禁用属性。如果您不希望链接任何内容，则需要完全删除该标签，或删除其href属性。

或者您也可以使用

<a href="javascript:void(0)" style="cursor: default;">123n</a>