1

I have a link that I do not want to be clickable so I created the following code: 

<a class="not-allowed" id="new-user" href="users/new">New</a>

<script>
    $('.not-allowed').click(false);
</script>

After some user action, I want the link to be clickable, So I use the following code:

$('#new-user').removeClass("not-allowed");

The class "not-allowed" is succesfully removed, but the link is still not clickable. I don't want to make all "not-allowed"s clickable because there are more on the page that still should not be clicked. How can I make the link clickable?

Philip7899
  • 4,599
  • 4
  • 55
  • 114

4 Answers4

3

For disabling a link, see the accepted answer to this question.

To make such a disabled link clickable again, however, requires not only the removal of the class, but you'll also need to unbind the handler that disables the link:

$('new-user').removeClass('not-allowed');
$('new-user').off('click');
Community
  • 1
  • 1
neuronaut
  • 2,689
  • 18
  • 24
2

An option is to delegate the event to a common parent of your anchors. For example if #test is an ancestor of them:

$('#test').on('click', '.not-allowed', false);

Using this you can freely add or remove the class, without managing the individual click event of each element.

MrCode
  • 63,975
  • 10
  • 90
  • 112
0

The problem is that when you call $('.not-allowed').click(false); it adds an event handler to that element. Removing the class does not remove that event handler. So the solution is to remove the event handler. You can do this by adding:

$( "#new-user" ).unbind();

Wherever you remove the class name.

Demo here

alex
  • 444
  • 1
  • 5
  • 17
0

I see 2 things wrong, one may just be a typo in your question.

First the selector where you are removing the class is 'new-user', it should be '#new-user'.

Second, even though the class has been removed the click event handler is still bound to the link.

To remove the click event handler you would do something like this:

$('#new-user').off('click');
Matt Dyer
  • 126
  • 7