无法禁用简单的标签[重复]

Question

我找不到禁用 li 上的 a 标签的方法。一切都显示为已禁用，但我仍然可以单击它。

我正在使用 AngularJS 和 Bootstrap

我应该如何禁止点击标签？

vm.actions.documentsCompleted 为假。 li 上的第一个 ng-class 运行良好。但我仍然可以单击选项卡。

<li ng-class="{'disabled': !vm.actions.documentsCompleted}" class="nav-item">
   <a ng-disabled="!vm.actions.documentsCompleted" class="nav-link " id="risk-tab" data-toggle="tab" href="#risk" role="tab" aria-controls="contact" aria-selected="false"><span ng-class="{'d-none' : !saved.savedRisk}"><i class="far fa-check fa fa-sm"></i></span> Text</a>

Answer 1

根据引导文档https://getbootstrap.com/docs/4.0/components/navs/ 要禁用任何导航元素中的链接，您应该在<a> 元素上使用disabled 类，如下所示：

<li class="nav-item">
<a ng-disabled="!vm.actions.documentsCompleted" class="nav-link" ng-class="{'disabled': !vm.actions.documentsCompleted}" id="risk-tab" data-toggle="tab" href="#risk" role="tab" aria-controls="contact" aria-selected="false"><span ng-class="{'d-none' : !saved.savedRisk}"><i class="far fa-check fa fa-sm"></i></span> Text</a>

对于 bootstrap v3.*，您提供的代码应该按照文档 https://getbootstrap.com/docs/3.3/components/#nav-disabled-links 中的说明工作