尽管该链接已禁用，但仍可单击。
<a href="/" disabled="disabled">123n</a>
如果它被禁用，我可以让它不可点击吗？我应该使用 JavaScript 吗？
问问题
901009 次
33 回答
459
在 css 的帮助下，您将禁用超链接。试试下面
a.disabled {
pointer-events: none;
cursor: default;
}<a href="link.html" class="disabled">Link</a>于 2014-11-21T09:07:09.680 回答
288
超链接没有禁用属性。如果您不希望链接某些内容，则需要<a>完全删除该标签。
或者，您可以删除其href属性 - 尽管这有其他 UX 和可访问性问题，如下面的评论中所述，因此不推荐。
于 2012-12-19T15:30:30.507 回答
93
您可以使用：
<a href="/" onclick="return false;">123n</a>
于 2012-12-19T15:31:10.920 回答
80
您可以使用以下解决方案之一：
HTML
<a>link</a>
JavaScript
<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>
CSS
<a href="www.page.com" disabled="disabled">link</a>
<style type="text/css">
a[disabled="disabled"] {
pointer-events: none;
}
</style>
于 2014-10-08T15:05:02.877 回答
40
尝试这个：
<a href="javascript:void(0)" style="cursor: default;">123n</a>
于 2012-12-19T15:32:37.993 回答
21
该<a>标签没有disabled属性，仅用于<input>s （和<select>s 和<textarea>s）。
要“禁用”链接，您可以删除其href属性，或添加返回 false 的单击处理程序。
于 2012-12-19T15:31:30.033 回答
19
HTML：
<a href="/" class="btn-disabled" disabled="disabled">123n</a>
CSS：
.btn-disabled,
.btn-disabled[disabled] {
opacity: .4;
cursor: default !important;
pointer-events: none;
}
于 2016-01-26T10:32:24.057 回答
16
提示 1：使用 CSS pointer-events: none;
提示 2：使用 JavaScript javascript:void(0)
（这是最佳实践）
<a href="javascript:void(0)"></a>
技巧一：使用 Jquery $('selector').attr("disabled","disabled");
于 2019-03-08T09:15:56.633 回答
14
您需要删除<a>标签才能摆脱它。
或尝试使用：-
<a href="/" onclick="return false;">123n</a>
于 2012-12-19T15:31:13.050 回答
13
仅限 CSS：这会从href.
.disable {
pointer-events: none;
cursor: default;
}
于 2019-12-12T17:42:05.527 回答
6
让父母拥有pointer-events: none会像这样禁用孩子a-tag（要求 div 覆盖 a 并且没有 0 宽度/高度）：
<div class="disabled">
<a href="/"></a>
</div>
在哪里：
.disabled {
pointer-events: none;
}
于 2017-06-14T18:46:00.863 回答
5
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
});
});
于 2012-12-19T15:32:32.880 回答
5
您可以模拟<a>标签上的 disabled 属性。
<a href="link.html" disabled="">Link</a>
a[disabled] {
pointer-events: none;
cursor: default;
}
于 2017-08-15T09:20:43.750 回答
4
您可以使用此代码在运行时使用 javascript 禁用链接
$('.page-link').css("pointer-events", "none");
于 2018-05-22T13:29:33.733 回答
4
我有一个：
<a href="#">This is a disabled tag.</a>
希望它会帮助你;）
于 2020-01-24T20:32:53.343 回答
3
如果你想摆脱指针，你可以使用 css 来做到这一点cursor。
于 2012-12-19T15:33:38.900 回答
3
我们不能直接禁用它，但我们可以执行以下操作：
- 添加
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
}
?>
于 2018-04-08T16:45:27.190 回答
3
试试这个
<a href="javascript:void(0)">Click Hare</a>
于 2020-09-09T12:12:51.730 回答
3
就我而言，我使用
<a href="/" onClick={e => e.preventDefault()}>
于 2017-09-11T08:34:51.147 回答
3
于 2021-08-04T10:50:53.780 回答
2
最好的答案总是最简单的。无需任何编码。
如果 (a) 锚标记没有 href 属性，则它只是超链接的占位符。所有浏览器都支持！
<a href="/">free web counters</a><br />
<a "/">free web counters</a>于 2020-05-24T00:56:57.633 回答
2
我能够使用 ng-href 三元运算来达到预期的结果
<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>
在哪里
a.is-disabled{
color: grey;
cursor: default;
&:hover {
text-decoration: none;
}
}
于 2019-09-20T12:46:09.533 回答
1
我看到这里已经发布了大量答案，但我认为还没有任何明确的答案可以将已经提到的方法结合到我发现可行的方法中。这是为了使链接既显示为禁用，又不将用户重定向到另一个页面。
此答案假定您正在使用jquery和bootstraphref ，并在禁用时使用另一个属性临时存储该属性。
//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;
}
于 2020-05-10T19:59:13.097 回答
1
以下是禁用 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" );
});
于 2019-11-20T10:40:16.637 回答
1
正确使用按钮和链接。
• 按钮激活网页上的脚本功能（对话框、展开/折叠区域）。
• 链接将您带到另一个位置，可以是不同的页面，也可以是同一页面上的不同位置。
如果您遵循这些规则，则不会出现任何需要禁用链接的情况。即使您使链接看起来在视觉上被禁用并且单击时为空白
<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"
您不会考虑可访问性，屏幕阅读器会将其作为链接阅读，视障人士会一直想知道为什么链接不起作用。
于 2018-02-07T06:00:11.193 回答
1
如果您使用的是 WordPress，我创建了一个插件，可以做到这一点以及更多，而无需知道如何编写任何代码。您需要做的就是添加要禁用的链接的选择器，然后选择“在新选项卡中使用此选择器禁用所有链接”。从出现的下拉菜单中单击更新。
您可以从 WordPress.org 插件存储库获取免费版本以进行试用。
于 2019-05-24T17:04:16.017 回答
1
如果您需要使用 Javascript 禁用 laravel 上的链接，这是我的解决方案：
链接（刀片.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');
}
于 2022-01-10T17:39:48.237 回答
0
当您将鼠标悬停在href标记上时，它会显示在浏览器窗口的左下角。
我个人认为向用户显示类似javascript:void(0)的东西是可怕的。
取而代之的是，关闭href，使用 jQuery/其他任何东西做你的魔法并添加一个样式规则（如果你仍然需要它看起来像一个链接）：
a {
cursor:pointer;
}
于 2015-03-12T09:46:12.010 回答
-1
适合我的变体：
<script>
function locker(){
if ($("a").hasClass("locked")) {
$("a").removeClass('locked').addClass('unlocked');
$("a").attr("onClick","return false");
} else {
$("a").css("onclick","true");
$("a").removeClass('unlocked').addClass('locked');
$("a").attr("onClick","");
}
}
</script>
<button onclick="locker()">unlock</button>
<a href="http://some.site.com" class="locked">
<div>
....
<div>
</a>
于 2014-03-16T14:13:39.157 回答
-1
如果您只是想暂时禁用链接但将 href 留在那里以便以后启用（这是我想要做的），我发现所有浏览器都使用第一个 href。因此我能够做到：
<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>
于 2017-11-25T00:15:37.557 回答
-1
<a href="/" disabled="true" onclick="return false">123</a>只需添加：这通常有效，但是如果用户在浏览器中禁用了 javascript，它将无法正常工作。
1) 在集成 bootstrap 3 插件后，您可以选择在锚标签上使用 Bootstrap 3 类来禁用 href 标签
<a href="/" class="btn btn-primary disabled">123n</a>或者
2) 了解如何在浏览器中使用 html 或 js 启用 javascript。或创建一个弹出窗口，告诉用户在使用网站之前启用 javascript 使用
于 2018-03-31T15:31:43.247 回答
-1
您可以通过返回 false 来禁用锚标记。在我的情况下，我对 Jquery 手风琴使用 angular 和 ng-disabled，我需要禁用这些部分。
所以我创建了一个小 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>
于 2016-11-01T15:46:09.573 回答
-3
有一种简单而干净的方法，如下所示：
<a href="/shopcart/">
<button class="btn" disabled> Make an Order </button>
</a>
在默认情况下禁用属性<button>不会让点击通过<button>元素直到<a>元素。所以<a>元素甚至不知道发生了一些点击。通过在<button>. _
于 2020-08-10T08:56:56.443 回答