有一种简单干净的方法:

<a href="/shopcart/">

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

</a>

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

如果你需要用Javascript禁用laravel上的链接，这是我的解决方案:

链接(blade.php):

<a href='/link/to/path' class='btn btn-primary mt-3' onclick='disableLink(this)'>Confirmar</a>

. css文件

.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}

a[aria-disabled="true"] {
    color: currentColor;
    display: inline-block; /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
}

.js文件

function disableLink(link) {
    // 1. Add isDisabled class to parent element
    link.parentElement.classList.add('isDisabled');
    // 2. Store href so we can add it later
    link.setAttribute('data-href', link.href);
    // 3. Set aria-disabled to 'true'
    link.setAttribute('aria-disabled', 'true');
}

function enableLink(link) {
    // 1. Remove 'isDisabled' class from parent span
    link.parentElement.classList.remove('isDisabled');
    // 2. Set href
    link.href = link.getAttribute('data-href');
    // 3. Remove 'aria-disabled', better than setting to false
    link.removeAttribute('aria-disabled');
}

参考:https://css-tricks.com/how-to-disable-links/

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

当您将鼠标移到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>上添加/删除禁用属性进行操作。