尽管该链接被禁用,但它仍然是可点击的。

<a href="/" disabled="disabled">123n</a>

如果它是禁用的,我可以使它不可点击吗?我应该使用JavaScript吗?


当前回答

我能够使用ng-href三元操作实现所需的结果

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

在哪里

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

其他回答

我能够使用ng-href三元操作实现所需的结果

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

在哪里

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

超链接没有disabled属性。如果你不想要某些东西被链接,那么你需要移除<a>标签。

或者,你可以删除它的href属性-尽管这有其他的用户体验和可访问性问题,在下面的评论中指出,所以不建议。

当您将鼠标移到href标签上时,href标签中的任何内容都将显示在浏览器窗口的左下角。

我个人认为像javascript:void(0)这样的东西显示给用户是可怕的。

相反,关闭href,使用jQuery/其他工具,添加一个样式规则(如果你仍然需要它看起来像一个链接):

a {
    cursor:pointer;
}

有一种简单干净的方法:

<a href="/shopcart/">

  <button class="btn" disabled> Make an Order </button>

</a>

默认情况下,在<button>上禁用属性不会让点击通过<button>元素直到<a>元素。所以<a>元素甚至不知道发生了一些点击。通过在<button>上添加/删除禁用属性进行操作。

你可以通过返回false来禁用锚标记。在我的情况下,我使用angular和ng-disabled的Jquery手风琴,我需要禁用部分。

所以我创建了一个小js片段来解决这个问题。

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>