使用 javascript 禁用 a 标签（链接）答案

【问题标题】：Disabled the a tag (link) by using javascript使用 javascript 禁用 a 标签（链接）
【发布时间】：2009-12-17 04:19:26
【问题描述】：

有谁可以通过使用 javascript 禁用 a 标签（链接）？

例子：

<div class="sub-heading">
  Contact Details &nbsp; &nbsp; &nbsp; 
  <a href="./cust_add_edit_customer.php?action=edit_customer_details&amp;cust_code=12761">  
    <img class="imgVA editIconPad" src="../images/edit0.gif" 
      alt="Edit Contact Details" border="0" width="20" height="17">
  </a>
</div>

我希望在单击按钮后禁用此标签。

【问题讨论】：

你想禁用或隐藏它
“禁用”是什么意思？我假设您不希望用户能够单击它并导航到它的目标。是否还需要防止右键单击，“在新窗口/标签中打开”？
How do you make an anchor link non-clickable or disabled?的可能重复

标签： javascript

【解决方案1】：

我认为最人性化的方法是隐藏链接。在您的按钮单击处理程序中执行：

document.getElementById('anchorID').style.visibility = 'hidden';

然后重新启用它：

document.getElementById('anchorID').style.visibility = 'visible';

【讨论】：

【解决方案2】：

在a 标记上使用onclick="this.onclick=function(){return false}" 属性。如果有很多按钮，您应该在 JavaScript 脚本中遍历它们，为 click 添加一个事件侦听器，这是一个返回 false 的函数。

【讨论】：

【解决方案3】：

喂

function disableAnchor(obj, disable)
{
    if (disable) {
        var href = obj.getAttribute("href");
        if (href && href != "" && href != null) {
            obj.setAttribute('href_bak', href);
        }
        obj.removeAttribute('href');
        obj.style.color="gray";
    }
    else {
        obj.setAttribute('href', obj.attributes['href_bak'].nodeValue);
        obj.style.color="blue";
    }
}

或

var Link_Enabled_Flag = false; // disable links - background process changes this to true when it's done

function Check_Link_Enabled(){ return Link_Enabled_Flag; }

<a href="wherever.com" onclick="return Check_Link_Enabled()"></a>

或

IE 和 Firefox 兼容的 javascript 启用或禁用锚标记

onclick="disableAnchor(this,'verify')"

function disableAnchor(Check_Obj, Check_Id){
var Anchor_id = 's';
thisCheckbox = document.getElementById(Check_Id);
thisAnchor   = document.getElementById(Anchor_id);
if(thisCheckbox.checked){
//alert('Y1');
 Check_Obj.setAttribute('href',''); //Check_Obj.attributes['href_bak'].nodeValue
 Check_Obj.style.color="blue";
//alert('Y2');
}
else{
  //alert('N1');    

var href = Check_Obj.getAttribute('href');
 //alert(href);
 if(href && href != "" && href != null){
 Check_Obj.setAttribute('href_bak', href);
 }
 Check_Obj.removeAttribute('href');
 Check_Obj.style.color="gray";

 //alert('N2');
   } 
 }

【讨论】：

【解决方案4】：

将id 属性添加到要禁用的a 标记，然后：

document.getElementById('the_id').href = '#';

【讨论】：

它仍然可以点击并将页面滚动到顶部。

【解决方案5】：

你可以使用jquery

 $('sub-heading').attr("disabled", "true");

【讨论】：

选择器不正确。对于示例 HTML，它应该是 $('.sub-heading a').attr("disabled", "true")
另外，disabled 不是<a> 元素的属性。

【解决方案6】：

删除属性 href 像：

<a>Edit</a>

【讨论】：

【解决方案7】：

你可以这样做：

<a href="javascript:if (links_enabled) document.location='www.example.com';">enabled or disabled link</a>
<br/>
<a href="javascript:links_enabled = true;">enable link</a>
<br/>
<a href="javascript:links_enabled = !links_enabled;">toggle link</a>

我觉得这非常优雅，而且它还可以使链接仅在启用 javascript 时有效。换句话说，链接默认是禁用的。

【讨论】：

【解决方案8】：

“禁用”属性不会停止点击标签。但是我设计了一个 A 标签有一个按钮，并且至少添加了 "disabled": true 按钮的样式有一个真正的禁用按钮。

现在如果你想停止点击，你可以简单地使用 css 属性“pointer-events: none”

所以你可以使用这样的东西：

$('.sub-heading a').attr("disabled", "true");
$('.sub-heading a').css('pointer-events', 'none');

它会成功的；）

如果你想通过点击其他按钮来做到这一点：

jQuery('.my-other-button').on('click', function() {
    $('.sub-heading a').attr("disabled", "true");
    $('.sub-heading a').css('pointer-events', 'none');
});

【讨论】：

【解决方案9】：

在 CSS 中将指针事件设置为无。那就是：

指针事件：无；
然后在 javascript 中使用 DOM，随心所欲地更改它，例如填充、绘制、描边、可见...（这里将其更改为 none）

【讨论】：