我无法使用“禁用”属性禁用锚点答案

【问题标题】：I can't disable an anchor with the 'disabled' property我无法使用“禁用”属性禁用锚点
【发布时间】：2020-01-06 10:08:30
【问题描述】：

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

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

这告诉我：“HTMLElement”类型中不存在“已禁用”属性。

研究尝试：

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

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

使用 angular [disabled] 的属性，它向我显示：无法绑定到 'disabled'，因为它不是 'a' 的已知属性。

其他选择？问候

【问题讨论】：

无法使用disabled 属性禁用链接：stackoverflow.com/a/13955695/1903366
您可以尝试使用 css .disabled{ pointer-events: none } 向链接添加禁用类？
TypeScript 编译让您知道通用 HTML 元素上没有 disabled 属性。即使您将其转换为developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement，它也不起作用，因为这样的属性不存在。如果您可以将按钮样式设置为看起来像链接，那么如果您不介意提交表单，您将达到相同的效果

【解决方案1】：

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

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

作为替代方案，您可以禁用鼠标指针交互。

CSS：

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

HTML：

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

【讨论】：

【解决方案2】：

超链接没有禁用属性。如果您不想链接某些内容，则需要完全删除该标签，或删除其 href 属性。

或者你也可以使用

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

【讨论】：

【解决方案3】：

因为链接不包含 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";

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

这个元素必须是锚元素的兄弟。将父位置设置为relative，将兄弟位置设置为absolute，然后相应地设置兄弟z-index，并使用javascript显示/取消显示掩码。

【讨论】：