单击时如何禁用链接？答案

【问题标题】：how to disable link when its clicked?单击时如何禁用链接？
【发布时间】：2014-01-30 19:14:28
【问题描述】：

我想在点击链接时禁用链接，这是我的代码：

<a href="?cmd=7" style="color:#00F; margin-left:15px; text-decoration:underline">Past 7 Days</a>
<a href="?cmd=14" style="color:#00F; margin-left:15px; text-decoration:underline">Past 14 Days</a>
<a href="?cmd=30" style="color:#00F; margin-left:15px; text-decoration:underline">Past 30 Days</a>
<a href="?cmd=custom" style="color:#00F; margin-left:15px; text-decoration:underline">Set A Custom Date Range</a>

我希望当我单击过去 7 天的链接时，此链接被禁用或其他链接已启用，如果我单击过去 14 天的链接，则启用过去 7 天的链接并禁用过去 14 天的链接。我该怎么做这个？

【问题讨论】：

只有我一个人认为你想在页面加载时实现效果吗？
没有一个答案可以帮助我

标签： javascript php jquery

【解决方案1】：

$('a').on('click',function(){
   $('a').removeAttr('disabled');
   $(this).attr('disabled',true);
})

或

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

$('a').on('click',function(){
    $('a').removeClass('disable');
    $(this).addClass('disable');
})

【讨论】：

我认为OP希望实现跨页面加载的效果。
可能是因为你的jquery是在你运行代码之前加载的，或者jquery冲突
stackoverflow.com/questions/14203125/…
我删除 TypeError: $(...) is null 但我的链接没有禁用我希望我的链接被禁用它的颜色和下划线删除
$(this).css('color','red') ，你可以添加或删除任何你需要的东西

【解决方案2】：

CSS：

a:visited
{
 pointer-events: none;
 cursor: default;
}

【讨论】：

来自MDN：“:visited CSS 伪类允许您仅选择已访问过的链接。”这不是 OP 想要的。

【解决方案3】：

使用此代码禁用使用 jquery

$("a").on('click',function(){
$(this).attr('disabled',true);
})

【讨论】：

1. disabled 不应用于 <a>。 2. 这并不能回答问题。

【解决方案4】：

试试这个：

$('a').on("click", function (e) {
    e.preventDefault();
});

【讨论】：

【解决方案5】：

由于我的声誉不允许我发表评论，我将在此处发布作为答案。这是为了改进 Karthick Kumar Ganesh 的回答。

根据您使用的 jq 版本，您应该使用 .prop() 而不是 .attr() 来设置属性/属性。

此外，如果您不只是寻址锚点或添加获取参数，我会在您的链接上使用一个类，应该禁用该类，以便在单击后并非所有链接都被禁用。

$("a.disabable").on('click',function(){
  $(this).prop('disabled',true);
})

最后，添加target="_blank" 或类似于您的链接的内容非常有意义，以便您的链接在新标签页中打开。否则，在单击链接后禁用链接对我来说毫无意义。

示例链接如下所示

<a href="wher/you/want/to/go" class="disabable" target="blank" style="[...]">Foo</a>

【讨论】：

【解决方案6】：

这是迄今为止唯一解决方案，它可以跨页面加载，如 OP 所述（我假设单击锚点会更改文档位置并因此重新加载页面）。

HTML（添加了class 属性）：

<a class="cmd-7" href="?cmd=7" style="color:#00F; margin-left:15px; text-decoration:underline">Past 7 Days</a>
<a class="cmd-14" href="?cmd=14" style="color:#00F; margin-left:15px; text-decoration:underline">Past 14 Days</a>
<a class="cmd-30" href="?cmd=30" style="color:#00F; margin-left:15px; text-decoration:underline">Past 30 Days</a>
<a class="cmd-custom" href="?cmd=custom" style="color:#00F; margin-left:15px; text-decoration:underline">Set A Custom Date Range</a>

JavaScript（使用来自this answer 的代码）：

$(function() {
  // Get the cmd query parameter
  var cmd = getParameterByName('cmd');
  if(cmd) {
    // Disable the link
    $('a.cmd-' + cmd).click(function(event) {
      event.preventDefault();
    })
    // Add a class to allow styling
    .addClass('disabled');
  }
});

【讨论】：

当我使用你的代码时出现错误 ReferenceError: getParameterByName is not defined
@Arif 我写了“使用来自this answer 的代码”。所以你应该包括在引用的答案中声明的函数。
我使用了你的功能，但链接没有被禁用
点击链接时如何禁用链接
@Arif event.preventDefault(); 应该禁用该链接。 getParameterByName('cmd') 返回什么？您也可以使用 CSS 禁用链接：a.disabled { pointer-events: none; cursor: default; }（基于this answer）。

【解决方案7】：

.disabled {
text-decoration:none;
color:black;
 }


<a class="links" href="##"> Link1 </a></br>
<a class="links" href="##"> Link2 </a></br>
<a class="links" href="##"> link3 </a></br>


$(function(){
   $(".links").click(function(){
    if($(this).hasClass("disabled")){
         return false;
    }
    else{
        $(".links").removeClass("disabled");
        $(this).addClass("disabled");
    }
});
})

我认为它会起作用

【讨论】：