отключить ссылку после клика, используя jQuery

Question

У меня есть несколько ссылок (элементы A) STYLED AS кнопки с классом «btn», и когда один из них нажат, я хочу, чтобы эта кнопка была отключена. этот код не работает:

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

Есть еще Gazillion учебники для предотвращения события по умолчанию формы кнопки отправки, а затем отключить, но это не совсем то, что мне нужно ...

по-видимому, мой $this не указывает на правильный объект, или что-то =)

----------- UPDATE ---------------

Извините, обновите выше. Элемент, который у меня есть, не является кнопкой, это ссылка в виде кнопки ...

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 
}); 

Answer 2

Все работает отлично.

$('.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>

Answer 3

Вместо использования 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>

Надеется, что это помогает

Answer 4

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

Проверить этот пост: https://stackoverflow.com/a/5876747/5243272

Answer 5

Это работает (в хроме), но, возможно, некоторые недостатки?

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

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

     }); 

Answer 6

Вам остается только остановить дефолт по ссылкам.

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

Answer 7

$(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'); 
    }); 
}); 

Это позволит предотвратить какие-либо другие дополнительные клики по этой ссылке.

Answer 8

Если 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); 
}); 

Answer 9

Это работает для меня:

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