禁用 Bootstrap 中的链接

Answer 1

我认为你需要 btn 课程。
会是这样的：

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

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

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

Answer 4

如果您想要禁用链接，则没有选项可以执行此操作。我想你可以在这里找到适合你这个问题的答案。

这里的一个选择是使用

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

禁用href标签

Answer 5

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

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

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

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

Answer 6

使用 class="pe-none"。
找到引导程序链接这里。

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

Answer 7

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

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

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

Answer 8

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

.btn-link

a.disabled{
  @extend .btn-link
}

Answer 9

我开发了以下解决方案，因为当我将

Bootstrap 5

提供的 btn disabled 等类样式应用于卡片内的

<a>

元素时，边距和填充将应用于该元素：

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

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

Answer 10

我喜欢 Sercan 的答案，我在其中添加了一个小 jQuery，这样点击时链接也不会被跟随：

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

从上面的答案来看：

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

Answer 11

更改为然后就可以禁用它了。

html： 文字

js： $("#myId").prop("已禁用",true);