web-dev-qa-db-fra.com

Html- comment désactiver <a href>?

J'ai créé un bouton qui ouvre une fenêtre modale au clic.

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

Pour une raison quelconque, le data-role="disabled" ne fonctionne pas bien. Comment puis-je le désactiver?

htmlhref
34
sarit rotshild

Vous pouvez utiliser CSS pour accomplir ceci:

<style>
    .disabled {
        pointer-events: none;
        cursor: default;
    }
</style>

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

Exemple: http://jsfiddle.net/7EQJp/

Ou vous pouvez utiliser JavaScript pour empêcher l'action par défaut comme ceci:

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

J'ai créé un bouton ...

C'est là que tu as mal tourné. Vous n'avez pas créé un bouton, vous avez créé un élément d'ancrage. Si vous aviez utilisé un élément button à la place, vous n'auriez pas ce problème:

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

Si vous continuez à utiliser un élément a à la place, vous devriez au moins lui attribuer un attribut role défini sur "button" Et supprimer le href. attribuer tout à fait:

<a role="button" ...>

Une fois que vous avez fait cela, vous pouvez introduire n morceau de JavaScript qui appelle event.preventDefault() - ici avec event comme votre événement click.

8
James Donnelly
.disabledLink.disabled {pointer-events:none;}

Cela devrait le faire espère que j'ai aidé!

3
Grant Hood