Html- how to disable ?

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?

Just don't use an `` element if you don't really want to create a link. You can add `cursor:pointer` to any element in CSS. — pawel, Feb 04 '15 at 09:43
do not use `a` for buttons, they can't be disabled (not native, just workarounds). Use `button` tag. — Luizgrs, Feb 04 '15 at 09:43
Do you want to disable the default action of the link or you want to disable the modal to open? — iivannov, Feb 04 '15 at 09:57
Also, what makes you think `data-role` will actually do something? By default, `data-*` attributes do not do anything at all - they exist to contain some information. Libraries like jQuery make use of them, though. — Christian, Jul 03 '16 at 17:12

score 88 · Answer 1 · edited Dec 06 '20 at 03:10

88

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

edited Dec 06 '20 at 03:10

Penny Liu

15,447
5
79
98

answered Feb 04 '15 at 09:42

iivannov

4,341
1
18
24

6

Good idea, but this won't disable it. You can still use the tab to focus the link, and press enter to follow it. – Oriol Feb 04 '15 at 09:43

score 9 · Answer 2 · answered Feb 04 '15 at 09:46

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.

score 4 · Answer 3 · edited Oct 07 '16 at 06:37

4

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

That should do it hope I helped!

edited Oct 07 '16 at 06:37

ekad

14,436
26
44
46

answered Oct 07 '16 at 06:19

Grant Hood

71
1
6

score -2 · Answer 4 · edited Feb 04 '15 at 09:44

-2

<script>
    $(document).ready(function(){
        $('#connectBtn').click(function(e){
            e.preventDefault();
        })
    });
</script>

This will prevent the default action.

edited Feb 04 '15 at 09:44

James Donnelly

126,410
34
208
218

answered Feb 04 '15 at 09:41

Sameer Shaikh

7,564
2
17
32

9

Though very likely, considering jQuery isn't tagged you shouldn't post answers until further clarification is given. Your first approach here should have been to leave a comment asking *Are you using jQuery?* And, considering you didn't, what you should have definitely done is preface your answer with an *If you are using jQuery...*. – James Donnelly Feb 04 '15 at 09:42

Html- how to disable ?

4 Answers4

Linked