CODEWITHSUNDEEP
javascriptjquery
fox
fox

Reputation: 181

Disable and enable a tag on click

Can we disable a tag and enable it after adding class ? something like this : 

$('a').on('click', function(e) {

  e.preventDefault();
  e.stopPropagation();
  $(this).addClass('ajax-link').attr('rel', '#content')
  $(this).animate({
    'top': '100px',
  })
  // want to re-enable it and do the normal behaviour
  $(this).trigger('click')
  return true
})

Upvotes: 2

Views: 490

Answers (2)

Sagar Shinde
Sagar Shinde

Reputation: 160

You can add css property pointer-events: none; like below.`

$('a').on('click', function(e) {
//alert();
  e.preventDefault();
  e.stopPropagation();
  $(this).addClass('disabled');  
  
  // window.location.href = $(this).attr('href')
  });
a.disabled {
   pointer-events: none;
   cursor: default;
    color:#D3D3D3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myClass">
   <a href="https://www.google.com/" >Hello My Click</a>   
</div>

`

Upvotes: 1

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

You could do it this way : 

$('a').on('click', function(e) {

  e.preventDefault();
  e.stopPropagation();

  $(this).addClass('ajax-link')

  window.location.href = $(this).attr('href')
})
.ajax-link {
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<a href="https://google.com">Test</a>

You basically prevent the default action of the anchor that way the click won't work, then you add the class and manually send the user to the link.

I am sure that there are many other ways to do what you asked, this is just one of them that is simple and intuitive.

Upvotes: 3

Related Questions