禁用Bootstrap中的链接

Question

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

<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/

- user2990084

---

快速查看了文档，看起来“disabled”只适用于表单项。 - jksnw

Answer 1

我认为你需要使用btn类。

像这样：

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

- Caampa

---

或许更好的做法是使用 btn-link，以保持链接的外观。 - Jacob van Lingen

@JacobvanLingen 但是使用 btn-link disabled 无法正常工作，因为 pointer-events: none; 没有被应用（Bootstrap 3）。 - user764754

不错；一个小的补充 - 如果您在内联文本中嵌入了<a>，您需要通过添加p-0来删除btn添加的填充。您可能还想在聚焦时删除轮廓：https://dev59.com/PWIk5IYBdhLWcg3wr_9o - noamyg

在Bootstrap 5中，您无需添加任何JavaScript逻辑。 - Roman

Answer 2

看起来Bootstrap不支持禁用的链接。你可以自己添加一个类并为其添加样式，而不是尝试添加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>

- Emanuela Colta

---

值得注意的是，“pointer-events”存在一些限制。来自 Bootstrap 3 文档的描述如下：“该类使用 pointer-events: none 来尝试禁用 <a> 元素的链接功能，但这个 CSS 属性尚未被标准化，并且在 Opera 18 及以下版本以及 Internet Explorer 11 中并不完全支持。此外，即使在支持 pointer-events: none 的浏览器中，键盘导航也保持不受影响，这意味着有视力的键盘用户和辅助技术用户仍然可以激活这些链接。因此，为了安全起见，请使用自定义 JavaScript 来禁用此类链接。” - losmescaleros

禁用指针事件会导致无法显示提示信息，如果用户需要它的话。<a href="#" title="The reason is...." class="disabled" tabindex="-1">禁用链接</a> - JGV

Answer 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');
});

- Mike

Answer 4

如果您想禁用一个超链接，目前没有这个选项。我认为您可以在这里的问题中找到适合您的答案。

这里有一个选项可以使用：

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

禁用的href标签

- Cassandra

---

你可以使用CSS来模仿禁用链接的样式，方法如下： .disabled{ cursor:not-allowed; color:#eee; } - Cassandra

仍然可点击 - mxmissile

Answer 5

你无法将链接设置为“禁用”，只能禁用像输入框、文本框等系统元素。

但是，你可以通过 jQuery/JavaScript 禁用链接。

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

只需将上述代码放入您想要禁用链接的任何事件中即可。

- HelloWorld

Answer 6

感谢@jacob-van-lingen的评论，您可以在全局样式中扩展.btn-link

a.disabled{
  @extend .btn-link
}

- Fangxing

Answer 7

我刚刚从锚点标签中删除了“href”属性，以便禁用它。

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

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

- asifaftab87

Answer 8

请使用class="pe-none"。
在这里找到Bootstrap链接。

<a class="btn btn-outline-primary pe-none" target="_blank" href="#" role="button">Open</a>

- Bessa

Answer 9

我喜欢Sercan的答案，并在其中添加了一个小jQuery，以便在单击时也不会跟随链接：

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

并且针对上面的答案外观：

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

- Tillito

Answer 10

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

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

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

- Sercan Sebetçi