web-dev-qa-db-ja.com

Html- <a href>を無効にする方法

クリックするとモーダルウィンドウを開くボタンを作成しました。

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

何らかの理由でdata-role="disabled"がうまく機能しません。どうすれば無効にできますか？

htmlhref
34
sarit rotshild

CSSを使用してこれを実現できます。

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

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

例：http://jsfiddle.net/7EQJp/

または、JavaScriptを使用して、次のようなデフォルトアクションを防ぐことができます。

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

ボタンを作成しました...

これはあなたが間違っているところです。あなたはボタンを作成していません、アンカー要素を作成しました。代わりにbutton要素を使用した場合、この問題は発生しません。

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

代わりにa要素を引き続き使用する場合は、少なくとも"button"に設定されたrole属性を指定し、href属性を完全に削除する必要があります。

<a role="button" ...>

これが完了したら、 event.preventDefault()を呼び出すJavaScriptの一部 -ここでeventをクリックイベントとして導入できます。

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

それは私が助けたことを望んでいるはずです！

3
Grant Hood