如何使锚点链接不可点击或被禁用？

我有一个锚链接，一旦用户单击它，我想禁用它。或者，从文本周围删除锚标记，但绝对要保留文本。

<a href='' id='ThisLink'>some text</a>

通过添加按钮，我可以轻松地做到这一点，.attr("disabled", "disabled");
我已经成功添加了disabled属性，但是该链接仍然是可单击的。
我不在乎文本是否带有下划线。

有什么线索吗？

当您单击错误的音乐家时，它应该只添加“错误”，然后变得不可点击。
当您单击正确时，它应该添加“ Awesome”，然后禁用所有<a>标签。

我刚意识到你要的是（我希望）。这是一个丑陋的解决方案

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

最干净的方法是在要禁用单击时添加一个指针事件为：none的类。它的功能类似于普通标签。

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

使用指针事件 CSS样式。（如Jason MacDonald所建议的）

参见MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。大多数浏览器都支持它。

如果您具有如下所示的全局CSS规则，只需将简单的“ disabled”属性添加到锚即可：

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

$('a').removeAttr('href')

要么

$('a').click(function(){ return false})

视情况而定

Bootstrap为我们提供.disabled课程。请使用它。

但是，.disabled仅当'a'标签已经具有类'btn'时，类才起作用。它不适用于任何旧的'a'标签。该btn班可能无法在某些情况下是合适的，因为它有风格的内涵。在幕后，.disabled该类设置pointer-events为none，因此您可以使CSS做与Saroj Aryal和Vitrilo相同的事情。（谢谢Les Nightingill的建议）。

添加css课程：

.disable_a_href{
    pointer-events: none;
}

添加jquery：

$("#ThisLink").addClass("disable_a_href"); 

只需href从定位标记中删除该属性即可。

最好的方法是阻止默认操作。对于定位标记，默认行为是重定向到href指定地址。

因此，以下javascript在这种情况下效果最佳：

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

您可以使用onclick事件来禁用click操作：

<a href='' id='ThisLink' onclick='return false'>some text</a>

或者，您可以只使用<a>标签以外的其他东西。

杰森·麦克唐纳（Jason MacDonald）的评论对我有用，并在Chrome，Mozila和IE中进行了测试。

添加了灰色以显示禁用效果。

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

jQuery仅选择锚列表中的第一个元素，添加了元字符（*）以选择和禁用所有id为的元素#ThisLink。

$("#ThisLink*").addClass("disable_a_href"); 

编写这行jQuery代码

$('.hyperlink').css('pointer-events','none');

如果你想在css文件中写

.hyperlink{
    pointer-events: none;
}

在样式表中创建以下类：

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

将此类添加到您的动态链接，如下所示。

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

试试这个：

$('a').contents().unwrap();

只需在SASS中：

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

这是我以前禁用的方法，希望能有所帮助。

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

这是另一种实现方法，return false单击会添加带有的处理程序，该处理程序将禁用链接。

最简单的方法

在您的html中：

<a id="foo" disabled="true">xxxxx<a>

在您的js中：

$('#foo').attr("disabled", false);

如果您将其用作属性可以完美工作