html-禁用Bootstrap中的链接

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

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

5个解决方案
78 votes

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

<a class="btn disabled" href="#">Disabled link</a>
Caampa answered 2020-01-24T00:24:13Z
51 votes

Bootstrap似乎不支持禁用的链接。 不必尝试添加Bootstrap类,您可以自己添加一个类并为其添加一些样式,如下所示:

<!-- Make the disabled links unfocusable as well -->
<a href="#" class="disabled" tabindex="-1">Link to disable</a><br/>
<a href="#">Non-disabled Link</a>
<!-- 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 answered 2020-01-24T00:25:38Z
6 votes

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

一种选择是使用

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

禁用的href标签

Cassandra answered 2020-01-24T00:26:06Z
3 votes

我刚刚使用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 answered 2020-01-24T00:26:40Z
2 votes

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

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

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

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

HelloWorld answered 2020-01-24T00:27:09Z
translate from https://stackoverflow.com:/questions/29379979/disable-a-link-in-bootstrap