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?
.disabledLink.disabled {pointer-events:none;}
That should do it hope I helped!
<script>
$(document).ready(function(){
$('#connectBtn').click(function(e){
e.preventDefault();
})
});
</script>
This will prevent the default action.
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.
You can use CSS to accomplish this:
.disabled {
pointer-events: none;
cursor: default;
}
_x000D_
<a href="somelink.html" class="disabled">Some link</a>
_x000D_
Or you can use JavaScript to prevent the default action like this:
$('.disabled').click(function(e){
e.preventDefault();
})
Source: Stackoverflow.com