禁用Bootstrap中的链接

76

第一个示例不起作用。我需要始终有一个列表来禁用链接吗？还是我的第一个演示有什么问题？

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

— 用户名
source

快速浏览了一下文档，看起来“禁用”仅适用于表单项。

— jksnw

107

我认为您需要btn类。
就像这样：

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

— 坎帕
source

14

也许更好，可以使用它btn-link来保持链接的外观。

— 雅各布·范·林根

1

@JacobvanLingen但是withbtn-link disabled不能正常工作，因为pointer-events: none;未应用（Bootstrap 3）

— user764754

好一个很小的补充-如果您将<a>嵌入到嵌入式文本中，则希望通过添加来删除btn添加的填充p-0。您可能还需要删除聚焦时添加的轮廓：stackoverflow.com/questions/19053181/…–

— noamyg

67

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）
source

5

值得注意的是，“指针事件”有一些限制。从Bootstrap 3文档中：“该类使用指针事件：没有此类可尝试禁用<a> s的链接功能，但是该CSS属性尚未标准化，并且在Opera 18及以下版本或以下版本中不完全受支持Internet Explorer11。此外，即使在支持指针事件的浏览器中：无，键盘导航也不受影响，这意味着有视力的键盘用户和辅助技术用户仍将能够激活这些链接。 JavaScript来禁用此类链接。”

— losmescaleros

2

如果用户需要，禁用指针事件将不会显示工具提示。<a href="#" title="The原因is...." class="disabled" tabindex="-1">链接可以禁用</A>

— Vimalan再也Ganesh神

7

我刚刚使用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');
});

— 麦克风
source

6

如果您要尝试禁用链接，则没有选择。我认为您可以在这里找到一个适合您的答案。

这里的一种选择是使用

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

禁用的href标签

— 卡桑德拉
source

3

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

— Cassandra

虽然仍然可以点击

— mxmissile

4

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

但是您可以禁用jQuery / JavaScript的链接

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

只要将上述代码包装在您要禁用链接的任何事件中即可。

— 你好，世界
source

0

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

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

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

— asifaftab87
source