Question

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

我正在使用AngularJS和Bootstrap

如何禁用该标签？

vm.actions.documentsCompleted为false。 li上的第一个ng类效果很好。但是我仍然可以单击选项卡。

<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/禁用任何nav元素中的链接，您应该在disabled元素上使用<a>类，如下所示：

<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

中的说明工作

无法禁用简单的标签

1 个答案: