还有另一种可能的办法，也是我最喜欢的办法。基本上，这与lightbox禁用整个页面的方式是一样的，通过放置一个div和摆弄z-index。以下是我的一个项目的相关片段。这适用于所有浏览器!!!!!

Javascript (jQuery):

var windowResizer = function(){
        var offset = $('#back').offset();   
        var buttontop = offset.top;
        var buttonleft = offset.left;
        $('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
        offset = $('#next').offset();
        buttontop = offset.top;
        buttonleft = offset.left;
        $('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
}

$(document).ready(function() {
    $(window).resize(function() {   
        setTimeout(function() {
            windowResizer();
        }, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast
    });
});

在HTML中

<a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a>
<a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a>
<img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
<img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>

因此，调整器找到锚的位置(图像只是箭头)，并将禁用器放在顶部。禁用器的图像是一个半透明的灰色正方形(改变html中禁用器的宽度/高度以匹配您的链接)，以显示它是禁用的。浮动允许页面动态地调整大小，并且在windowResizer()中禁用程序也会这样做。你可以通过谷歌找到合适的图片。为了简单起见，我将相关的css内联放置。

然后基于某些条件，

$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

还有另一种可能的办法，也是我最喜欢的办法。基本上，这与lightbox禁用整个页面的方式是一样的，通过放置一个div和摆弄z-index。以下是我的一个项目的相关片段。这适用于所有浏览器!!!!!

Javascript (jQuery):

var windowResizer = function(){
        var offset = $('#back').offset();   
        var buttontop = offset.top;
        var buttonleft = offset.left;
        $('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
        offset = $('#next').offset();
        buttontop = offset.top;
        buttonleft = offset.left;
        $('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
}

$(document).ready(function() {
    $(window).resize(function() {   
        setTimeout(function() {
            windowResizer();
        }, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast
    });
});

在HTML中

<a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a>
<a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a>
<img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
<img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>

因此，调整器找到锚的位置(图像只是箭头)，并将禁用器放在顶部。禁用器的图像是一个半透明的灰色正方形(改变html中禁用器的宽度/高度以匹配您的链接)，以显示它是禁用的。浮动允许页面动态地调整大小，并且在windowResizer()中禁用程序也会这样做。你可以通过谷歌找到合适的图片。为了简单起见，我将相关的css内联放置。

然后基于某些条件，

$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

我会这样做

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

像这样的东西应该有用。您为想要禁用的链接添加一个类，然后在有人单击它们时返回false。要启用它们，只需删除该类。

只需添加一个css属性:

<style>   
a {
 pointer-events: none;
}
</style>

这样做可以禁用锚标记。

Bootstrap 4.1提供了一个名为disabled的类和aria-disabled="true"属性。

例子”

<a href="#" 
        class="btn btn-primary btn-lg disabled" 
        tabindex="-1" 
        role="button" aria-disabled="true"
>
    Primary link
</a>

更多内容请访问getbootstrap.com

如果你想动态地创建它，你不想关心它是button还是ancor than 在JS脚本中你需要这样的东西

   let $btn=$('.myClass');
   $btn.attr('disabled', true);
   if ($btn[0].tagName == 'A'){
        $btn.off();
        $btn.addClass('disabled');
        $btn.attr('aria-disabled', true);
   }

但是要小心

该解决方案仅适用于具有btn btn-link类的链接。

有时bootstrap建议使用card-link类，在这种情况下解决方案将不起作用。

在Razor (.cshtml)你可以做:

@{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>