虽然该链接已禁用，但仍可点击。
<a href="/" disabled="disabled">123n</a>
如果它被禁用，我可以让它不可点击吗？我必须使用 JavaScript 吗？
【问题讨论】：
标签： javascript html
在 css 的帮助下，您将禁用超链接。试试下面的
a.disabled {
pointer-events: none;
cursor: default;
}<a href="link.html" class="disabled">Link</a>【讨论】：
opacity: 0.5;
tabindex="-1" 来禁用它。
超链接没有禁用属性。如果您不想链接某些内容，则需要完全删除 <a> 标记。
或者，您可以删除其href 属性 - 尽管这有其他 UX 和可访问性问题，如下面的 cmets 中所述，因此不推荐。
【讨论】：
onclick="return false;" 添加到锚标记中，或者添加一个title 属性来说明链接无效。
href 并留下 <a> 将不符合 ADA。
你可以使用：
<a href="/" onclick="return false;">123n</a>
【讨论】：
您可以使用以下解决方案之一：
<a>link</a>
<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>
<a href="www.page.com" disabled="disabled">link</a>
<style type="text/css">
a[disabled="disabled"] {
pointer-events: none;
}
</style>
【讨论】：
试试这个：
<a href="javascript:void(0)" style="cursor: default;">123n</a>
【讨论】：
<a> tag 没有disabled 属性，它仅适用于<input>s（以及<select>s 和<textarea>s）。
要“禁用”链接，您可以删除其 href 属性，或添加返回 false 的点击处理程序。
【讨论】：
href 可能会使光标在您悬停在它上面时不会改变。
HTML：
<a href="/" class="btn-disabled" disabled="disabled">123n</a>
CSS：
.btn-disabled,
.btn-disabled[disabled] {
opacity: .4;
cursor: default !important;
pointer-events: none;
}
【讨论】：
提示 1：使用 CSS pointer-events: none;
提示 2：使用 JavaScript javascript:void(0)
（这是最佳做法）
<a href="javascript:void(0)"></a>
提示1：使用Jquery $('selector').attr("disabled","disabled");
【讨论】：
您需要删除<a> 标签才能摆脱这种情况。
或尝试使用：-
<a href="/" onclick="return false;">123n</a>
【讨论】：
仅限 CSS：这会从 href 中删除链接。
.disable {
pointer-events: none;
cursor: default;
}
【讨论】：
让父级拥有pointer-events: none 将像这样禁用子级a-tag（要求 div 覆盖 a 并且宽度/高度不为 0）：
<div class="disabled">
<a href="/"></a>
</div>
地点：
.disabled {
pointer-events: none;
}
【讨论】：
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
});
});
【讨论】：
您可以在 <a> 标记上模拟 disabled 属性。
<a href="link.html" disabled="">Link</a>
a[disabled] {
pointer-events: none;
cursor: default;
}
【讨论】：
您可以使用此代码在运行时禁用使用 javascript 的链接
$('.page-link').css("pointer-events", "none");
【讨论】：
我有一个：
<a href="#">This is a disabled tag.</a>
希望对你有所帮助；）
【讨论】：
如果你想摆脱指针，你可以使用 cursor 使用 css 来做到这一点。
【讨论】：
就我而言，我使用
<a href="/" onClick={e => e.preventDefault()}>
【讨论】：
试试这个
<a href="javascript:void(0)">Click Hare</a>
【讨论】：
我们不能直接禁用它，但我们可以执行以下操作：
type="button"。href="" 属性。disabled 属性，以便通过更改光标来显示它已被禁用并变暗。PHP 中的示例：
<?php
if($status=="Approved"){
?>
<a type="button" class="btn btn-primary btn-xs" disabled> EDIT
</a>
<?php
}else{
?>
<a href="index.php" class="btn btn-primary btn-xs"> EDIT
</a>
<?php
}
?>
【讨论】：
<a>的属性
【讨论】：
我能够使用 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 属性，则它只是超链接的占位符。所有浏览器都支持！
<a href="/">free web counters</a><br />
<a "/">free web counters</a>【讨论】：
正确使用按钮和链接。
• 按钮可激活网页上的脚本功能（对话框、展开/折叠区域）。
• 链接将您带到另一个位置，可以是不同的页面，也可以是同一页面上的不同位置。
如果您遵循这些规则，则不会出现需要禁用链接的情况。即使您使链接看起来在视觉上被禁用并且单击时为空白
<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"
您不会考虑可访问性，屏幕阅读器会将其作为链接阅读，视障人士会一直想知道为什么链接不起作用。
【讨论】：
如果您使用的是 WordPress，我创建了一个插件，无需知道如何编写任何代码，即可完成此任务以及更多其他任务。您需要做的就是添加要禁用的链接的选择器，然后选择“在新选项卡中使用此选择器禁用所有链接”。从出现的下拉菜单中点击更新。
Click here to view a gif that demonstrates this
你可以get the free version from the WordPress.org Plugin repository试试看。
【讨论】：
以下是禁用 a 标签的多种方法：
<a >Link Text</a> remove the href from your anchor tag <a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href <a href="/" onclick="return false;">Link text</a> using return false由于锚标记没有禁用属性。 如果您想停止 jQuery 函数内的锚标记行为，则可以在函数开头使用以下行：
$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});
【讨论】：
我看到这里已经发布了大量答案，但我认为还没有一个明确的答案可以将已经提到的方法结合到我发现可行的方法中。这是为了使链接既显示为禁用，又不将用户重定向到另一个页面。
此答案假定您正在使用 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;
}
【讨论】：
如果您需要使用 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');
}
【讨论】：
href 标记中的任何内容都将在您将鼠标悬停在浏览器窗口的左下方显示。
我个人认为向用户显示像 javascript:void(0) 这样的东西是可怕的。
相反，请关闭 href，使用 jQuery/其他任何东西来发挥你的作用，并添加一个样式规则（如果你仍然需要它看起来像一个链接）：
a {
cursor:pointer;
}
【讨论】：
您可以通过返回 false 来禁用锚标记。在我的情况下，我对 Jquery 手风琴使用 angular 和 ng-disabled，我需要禁用这些部分。
所以我创建了一个小 js sn-p 来解决这个问题。
<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>
【讨论】：
如果您只是想暂时禁用链接但将 href 留在那里以便稍后启用（这是我想要做的），我发现所有浏览器都使用第一个 href。因此我能够做到：
<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>
【讨论】：