jquery - Disable link button in laravel after click

Question

I am trying to add disabled class to bootstrap anchor button, but it does not work. I added it like below,

1. jquery>js>html
2. jquery>html>js

$(document).ready(function() {
  var fewSeconds = 5;
  
  $('#dis').click(function() {
    var btn = $('#dis');
    btn.addClass('disabled');
    // alert('works');
    
    setTimeout(function() {
      btn.removeClass('disabled');
    }, fewSeconds * 1000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/posts" id="dis" class="btn btn-light me-2 my-2 rounded-pill" type="button">Posts</a>

question from:https://stackoverflow.com/questions/65559595/disable-link-button-in-laravel-after-click

Answer 1

Use preventDefault(); to disable the link.

$(document).ready(function() {
  $('.disabled').on("click", function (e) {
    e.preventDefault();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="https://stackoverflow.com/" class="disabled">Link</a>