使用 jquery 禁用链接不起作用

Question

我试图通过使用 jquery 中的 if 语句检查是否满足某些条件来禁用链接。我查看了其他问题并尝试了这些解决方案

if (discussionPointsSize == 0) {
  $('#discussionPointsLink').preventDefault();
  $('#discussionPointsLink').bind('click', false);
  $('#discussionPointsLink').click(function() {
    return false;
  });
  $('#discussionPointsLink').data('disabled()')
  $('#discussionPointsLink').click(function() {
    return ($(this).attr('disabled')) ? false : true;
  });
  $('#discussionPointsLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
  });
}

但上述所有解决方案都没有禁用链接。只是为了确保我尝试了 .hide .hide()并且链接被隐藏，所以这意味着我正在访问链接。所以有人能告诉我我该怎么做吗？

Answer 1

在这里你应该尝试pointer-events: none; 在 CSS 中。 如果条件为真，我们将为它添加类disable-this 。 如果没有，我们将删除类disable-this

if (discussionPointsSize == 0) {
  $('#discussionPointsLink').addClass('disable-this');
} else {
  $('#discussionPointsLink').removeClass('disable-this');
}

我们将像这样定义类disable-this this

  .disable-this{
    pointer-events: none;
  }

或者，如果您不想在 CSS 文件中添加任何内容，则应该这样做

if (discussionPointsSize == 0) {
  $('#discussionPointsLink').css({'pointer-events': 'none'});
} else {
  $('#discussionPointsLink').css({'pointer-events': 'inherit'});
}

Answer 2

你可以使用这个。如果你想禁用它的功能。

$('.my-link').click(function (e) {e.preventDefault();return false;});

Answer 3

尝试这个

$(this).attr('href',"#") 

它不会执行点击，您应该将颜色更改为灰色

Answer 4

这是正确的方法：

  $('#discussionPointsLink').click(function(e) {
    if(discussionPointsSize == 0){
       e.preventDefault();
    }else{
      //do other stuff when a click happens
    }
  });

我猜您正在尝试解除单击处理程序的绑定以执行代码，如果是这种情况，那么您可以使用.off()但您需要使用.on()绑定事件：

if(discussionPointsSize == 0){
   $('#discussionPointsLink').off();
}

Answer 5

尝试这个.....

if (discussionPointsSize == 0) {
      $('#discussionPointsLink').attr("href","javascript:void(0);");
}

Answer 6

这将禁用链接并使其成为纯文本，如果条件变为 false 将使其再次成为链接。

 $(function() { $(".anylink").click(function(e) { var discussionPointsSize = 0; if (discussionPointsSize == 0) { e.preventDefault(); this.disabled=true; $(this).attr("data-href", this.href); // Saving it if you want to regenrate a link. this.removeAttribute('href'); this.style.textDecoration = 'none'; this.style.cursor = 'default'; return false; } else{ this.disabled=false; //assign href dynamically this.href = $(this).data("href"); this.style.textDecoration = "underline"; this.style.cursor = "hand"; } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="http://example.com" data-href="http://example.com" target="_blank" class="anylink">Yo, Click Me</a>

Answer 7

我认为有很多方法可以解决它，我的解决方案是添加属性"disable"和"preventDefault()" ，一些“css”代码如下：

HTML

<a id="a1" href="http://vnlives.net">vnlives.net</a> | 
<a id="a2" href="http://www.google.com">Google</a>

爪哇脚本

$('#a1').attr('disabled', 'disabled').css("color","#ccc");

$('a').live('click', function(e) {
    if ($(this).attr('disabled') == 'disabled') {
        e.preventDefault();
    }
});

演示： https : //jsfiddle.net/bnson/7hzvvwp8/3/

注意：我使用 jquery 1.7.2