使用jQuery在点击后禁用链接

Question

我有很多链接（A元素）作为按钮使用，并且它们的类名是“btn”。当其中一个被点击时，我希望该特定按钮被禁用。下面这段代码无法实现：

$('.btn').on('click', function(e) {
    $(this).prop('disabled',true);
});

有许多教程可以防止表单提交按钮的默认事件，然后禁用它们，但这并不是我需要的...

显然，我的$this没有指向正确的对象，或者其他什么问题 =)

----------- 更新 ---------------

抱歉，上面的更新。我拥有的元素不是按钮，而是样式类似于按钮的链接...

- Matt Welander

---

你能否在 StackSnippet 或 http://jsfiddle.net 上重现它？ - Pranav C Balan

尝试在回调函数的末尾返回false，并在使用普通post提交表单时再次检查它。您还可以尝试使用e.preventDefault()并检查它是否起作用。 - K D

似乎工作正常。您需要提供一个最小的工作示例来说明您的问题，并记录您期望的行为。 - seemly

不要尝试禁用链接，而是尝试更新它的href属性。 $(this).attr("href","javascript:void(0);"); - K D

Answer 1

不要试图禁用锚点标签，而是尝试设置href属性。

$('.btn').on('click', function(e) {
    e.preventDefault();
    $(this).off("click").attr('href', "javascript: void(0);");
   //add .off() if you don't want to trigger any event associated with this link
});

- K D

---

.off("click") 的效果非常好，但是当我尝试使用 .on("click") 来启用锚点时，它不起作用。 - Aniket Tiwari

Answer 2

在我的情况下，我使用了以下内容：

onclick="$(this).css('pointer-events', 'none');"

- PABLO CESAR VEGA VALVERDE

Answer 3

这对我有效：

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

- Jeffry Diaz

---

在Chrome中工作，所有答案，包括被接受的答案，要么不起作用，要么不适合我的需求（因此未经测试）。 - xrfang

Answer 4

你只需要阻止链接的默认事件。

$('.btn').on('click', function(e) {
    $(this).prop('disabled',true);
    e.preventDefault();
});

- Rajbir Sharma

Answer 5

它运行良好。

$('.btn').on('click', function(e) {
  $(this).prop('disabled',true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button class='btn'>But1</button>
  <button class='btn'>But2</button>
</div>

- Charly berthet

---

抱歉，这个元素是一个<a>标签而不是一个按钮，它被样式化成了一个按钮，所以我自己给迷惑了... - Matt Welander

Answer 6

不必使用 this，您可以通过使用其 id 指定目标。

$('.btn').on('click', function(e) {
        $('#btn2').prop('disabled',true);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>

希望能有所帮助

- Yusril Maulidan Raji

---

我知道，但我想要一个适用于所有.btn的任意函数。 - Matt Welander

当其中一个被点击时，我希望该特定按钮被禁用。从那句话中，我认为只有一个指定的按钮应该被禁用。因此，如果情况是所有按钮都应该被禁用，那么你的代码已经很好地工作了。 - Yusril Maulidan Raji

不是所有的按钮都应该被点击，只有被点击的那个，但是当我编写代码时，我不知道哪个按钮会被点击，所以代码必须在这个意义上是抽象的。 - Matt Welander

Answer 7

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

请查看这篇文章：https://dev59.com/LW025IYBdhLWcg3wqX1o#5876747。

- sandrooco

Answer 8

这个在Chrome中可以工作，但可能存在一些缺点？

        $('.btn').on('click', function(e) {
            if( $(this).prop('disabled') == true) {
                return false; 
            }

            $(this).prop('disabled',true);

        });

- Matt Welander

---

这应该可以正常工作，但是您可以使用 data('disabled', true) 而不是 prop('disabled', true) 来确保它在所有浏览器中都能正常工作。 - mylee

顺便提一下，禁用未生效主要是因为您使用了<a>超链接元素而不是具有名为“disabled”的属性的按钮元素。 - mylee

根据此处 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a ，<a>没有disabled属性。然而，我认为您可以通过删除href属性并改变css来欺骗它。 - Yusril Maulidan Raji

Answer 9

$(document).ready(function() {
  $('.btn').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    alert('I have been clicked!');
    $(this).css('pointer-events', 'none').css('cursor', 'default');
  });
});

这将防止任何其他进一步点击该链接。

- Dinca Adrian

Answer 10

如果你的HTML代码像这样：

<a href="https://www.google.co.in/" target="_blank" class="test">This      is another paragraph.</a>

使用以下代码：

$(".test").one("click", function() {
    var clas = $(this).attr("class");
    setTimeout(function() {
        $("." + clas).removeAttr('href');
    }, 100);
});

如果你的 Html 是这样的

<a href="https://www.google.co.in/" target="_blank" class="test"> <button class="btn">This is another paragraph.</button></a>

请使用以下代码：

$(".btn").one("click", function() {
    var clas = $(this).parent().attr("class");
    setTimeout(function() {
        $("." + clas).removeAttr('href');
    }, 100);
});

- Inderjeet Singh Behl