Html- how to disable <a href>? [duplicate]

Question

I created a button that open a modal window on click.

<a href="#"  data-toggle="modal" data-target="#myModal" class="signup-button gray-btn pl-pr-36" id="connectBtn"  data-role="disabled">Connect</a>

For some reason the data-role="disabled" doesn't work good. How can I disable it?

Answer 1

You can use CSS to accomplish this:

.disabled {
  pointer-events: none;
  cursor: default;
}

<a href="somelink.html" class="disabled">Some link</a>

Or you can use JavaScript to prevent the default action like this:

$('.disabled').click(function(e){
    e.preventDefault();
})

Answer 2

I created a button...

This is where you've gone wrong. You haven't created a button, you've created an anchor element. If you had used a button element instead, you wouldn't have this problem:

<button type="button" data-toggle="modal" data-target="#myModal" data-role="disabled">
    Connect
</button>

If you are going to continue using an a element instead, at the very least you should give it a role attribute set to "button" and drop the href attribute altogether:

<a role="button" ...>

Once you've done that you can introduce a piece of JavaScript which calls event.preventDefault() - here with event being your click event.

Answer 3

.disabledLink.disabled {pointer-events:none;}

That should do it hope I helped!