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

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

其他回答

在我的情况下,我使用

<a href="/" onClick={e => e.preventDefault()}>

<a href=“/” disabled=“true” onclick=“return false”>123</a>

只是补充:这在一般情况下工作,但它不会工作,如果用户已经在浏览器中禁用javascript。

1)你可以选择在你的锚标签上使用Bootstrap 3类来禁用href标签,在集成Bootstrap 3插件do之后

< href=“btn btn-primary disabled”>123n</a>

Or

2)学习如何在浏览器中使用html或js启用javascript。 或者创建一个弹出窗口,告诉用户在使用网站之前启用javascript

提示1:使用CSS指针事件:无;

JavaScript:void(0) (这是一个最佳实践)

<a href="javascript:void(0)"></a>

使用Jquery $('selector').attr("disabled","disabled");

你可以通过返回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>

我看到这里已经贴出了大量的答案,但我不认为有任何明确的答案可以将前面提到的方法结合到我发现的有效方法中。这是为了使链接既显示为禁用,也不会将用户重定向到另一个页面。

这个答案假设你正在使用jquery和bootstrap,并使用另一个属性临时存储href属性,而禁用。

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }
a.disabled {
  cursor: default;
}