logo标签列表

禁用 href 标签

javascripthtml
396

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

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

如果禁用了，我可以使它不可点击吗？是否必须使用JavaScript？

3
请参考 https://dev59.com/G3I95IYBdhLWcg3w7CnL ，使用CSS禁用一个链接。 - Fred Foo
仅供澄清：我的猜测是你已经禁用了链接，但"点击"事件仍然触发了？ - Levi Hackwith
2
你可以在CSS中使用pointer-events:none;。 - ppsreejith
4
你可以使用 preventDefault()。https://dev59.com/RXM_5IYBdhLWcg3wfTO7 - Ciack404
但是为什么不直接删除href属性呢？ - MrBoJangles
30个回答
6
6
$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});
1
这个代码是在右键单击时起作用的，因此它不是一个完美的解决方案。 - Lakhan
5

您可以使用以下代码在运行时使用JavaScript禁用链接：

$('.page-link').css("pointer-events", "none");

这将使所有类名为“page-link”的元素无法被点击。

虽然有点晚了，但这也会移除任何光标 CSS。在我的情况下，如果链接被禁用，我使用“cursor: not-allowed”。 - Steve
5

我有一个：

<a href="#">This is a disabled tag.</a>

希望这能帮到你；）
1
嗨Werenverlivitz，欢迎。很好，没想到你会是7-8年后第一个给出这样答案的人！ - Tiago Martins Peres
它并没有被禁用，只是跳转到当前页面，可能会导航离开当前部分。 - siride
Ts不允许这样做："href属性需要一个有效的值才能访问" - misolo
Ts 不允许这样做: "href 属性需要有效的值才能访问"。 - misolo
4
我们不能直接禁用它，但我们可以执行以下操作：
  1. 添加 type="button"。
  2. 删除 href="" 属性。
  3. 添加 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    
}
?>
2
type属性用于MIME类型，没有“button”类型，请参见HTML <a> type属性。此外，disabled不是<a>的属性。 - Bjarke Pjedsted
4
在我的情况下，我使用
<a href="/" onClick={e => e.preventDefault()}>
4

如果您想要去掉指针，可以使用CSS并使用cursor来实现。

4
我使用ng-href三元操作符取得了期望的结果。
<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

where

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

   &:hover {
      text-decoration: none;
   }
}
3
最好的答案总是最简单的。不需要任何编码。
如果（a）锚点没有href属性，它只是超链接的占位符。被所有浏览器支持！ 

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

2
我看到这里已经有很多答案了，但我认为还没有一个清晰的答案将已经提到的方法结合起来，而我找到的方法可以让链接既显示为禁用状态，又不会将用户重定向到另一个页面。
此答案假设您正在使用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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接