在 Bootstrap 中禁用链接

Posted 2023-03-05

【中文标题】在 Bootstrap 中禁用链接

【英文标题】：Disable a link in Bootstrap

【发布时间】：2015-06-05 11:05:01

【问题描述】：

第一个示例不起作用。我需要一个列表来禁用链接？或者我的第一个演示有什么问题？

<a class="disabled" href="#">Disabled link</a>

---

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

https://jsfiddle.net/7y0u2amy/

【问题讨论】：

快速浏览了文档，似乎 disabled 仅适用于表单项。

【参考方案1】：

我认为你需要 btn 类。 应该是这样的：

<a class="btn disabled" href="#">Disabled link</a>

【讨论】：

或者更好，使用btn-link 来保持链接的外观。

@JacobvanLingen 但是btn-link disabled 不能正常工作，因为pointer-events: none; 没有应用（引导3）

不错；一个小补充 - 如果您将 嵌入在内联文本中，您还需要通过添加 p-0 来删除 btn 添加的填充。您可能还想删除聚焦时添加的轮廓：***.com/questions/19053181/…

【参考方案2】：

Bootstrap 似乎不支持禁用链接。您可以自己添加一个类并为其添加一些样式，而不是尝试添加 Bootstrap 类，就像这样：

a.disabled 
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;

<!-- Make the disabled links unfocusable as well -->
<a href="#" class="disabled" tabindex="-1">Link to disable</a><br/>
<a href="#">Non-disabled Link</a>

【讨论】：

值得注意的是，“指针事件”有一些限制。来自 Bootstrap 3 文档：“此类使用指针事件：无尝试禁用 s 的链接功能，但该 CSS 属性尚未标准化，并且在 Opera 18 及更低版本中或在Internet Explorer 11. 此外，即使在支持 pointer-events: none 的浏览器中，键盘导航仍然不受影响，这意味着有视力的键盘用户和辅助技术用户仍然能够激活这些链接。所以为了安全起见，请使用自定义javascript 禁用此类链接。”

如果用户需要，禁用指针事件将不会显示工具提示。 链接禁用

【参考方案3】：

我刚刚使用 CSS 创建了自己的版本。因为我需要禁用，所以当文档准备好时使用 jQuery 激活。因此，在文档准备好之前，用户无法单击按钮。所以我可以用 AJAX 代替。我想出的方法是向锚标记本身添加一个类，并在文档准备好时删除该类。可以根据您的需要重新调整它的用途。

CSS：

a.disabled
    pointer-events: none;
    cursor: default;

html：

<a class="btn btn-info disabled">Link Text</a>

JS：

$(function()
    $('a.disabled').on('click',function(event)
        event.preventDefault();
    ).removeClass('disabled');
);

【参考方案4】：

如果您尝试禁用链接，则无法执行此操作。我想你可以在这里找到一个对你有用的答案。

这里的一个选择是使用

<a href="/" onclick="return false;">123n</a>

Disabled href tag

【讨论】：

您可以使用 .disabled cursor:not-allowed; 来模仿 CSS 中禁用链接的样式。颜色：#eee;

仍然可以点击

【参考方案5】：

您不能仅将输入、文本字段等系统元素设置为“禁用”的链接。

但您可以使用 jQuery/JavaScript 禁用链接

$('.disabled').click(function(e)
    e.preventDefault();
);

只需将上面的代码包装在您想要禁用链接的任何事件中。

【参考方案6】：

我刚刚从要禁用的锚标记中删除了“href”属性

$('#idOfAnchorTag').removeAttr('href');

$('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled');

【参考方案7】：

感谢@jacob-van-lingen 的评论，你可以用你的全局风格扩展.btn-link

a.disabled
  @extend .btn-link

【参考方案8】：

我开发了以下解决方案，因为当我将 Bootstrap 5 提供的 btn disabled 等类样式应用到卡片内的 <a> 元素时，边距和填充将应用于元素：

.disabled 
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;

<a href="#" class="disabled">Disabled Link</a>