web-dev-qa-db-ja.com

Bootstrapのリンクを無効にします

最初の例は機能しませんでした。リンクを無効にするには、常にリストが必要ですか？または、最初のデモの何が問題になっていますか？

<a class="disabled" href="#">Disabled link</a>

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

https://jsfiddle.net/7y0u2amy/

htmlcsstwitter-bootstraptwitter-bootstrap-3
49
user2990084

btnクラスが必要だと思います。
次のようになります。

<a class="btn disabled" href="#">Disabled link</a>
75
Caampa

Bootstrapは無効なリンクをサポートしていないようです。 Bootstrapクラスを追加する代わりに、独自にクラスを追加し、次のようにスタイルを追加できます。

a.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}
<!-- Make the disabled links unfocusable as well -->
<a href="#" class="disabled" tabindex="-1">Link to disable</a><br/>
<a href="#">Non-disabled Link</a>
50
Emanuela Colta

しようとしているのがリンクを無効にすることである場合、これを行うオプションはありません。この質問であなたに役立つ答えを見つけることができると思います。

ここでの1つのオプションは、使用することです

<a href="/" onclick="return false;">123n</a>

hrefタグを無効化

5
Cassandra

入力、テキストフィールドなどのシステム要素だけにリンクを「無効」に設定することはできません。

ただし、jQuery/JavaScriptを使用してリンクを無効にすることができます

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

リンクを無効にするイベントに上記のコードをラップするだけです。

3
HelloWorld

CSSを使用して独自のバージョンを作成しました。無効にする必要があるため、ドキュメントの準備ができたらjQueryを使用してアクティブにします。そのため、ユーザーはドキュメントの準備ができるまでボタンをクリックできません。そのため、代わりにAJAXで置き換えることができます。私が思いついた方法は、アンカータグ自体にクラスを追加し、ドキュメントの準備ができたらクラスを削除することでした。これをニーズに合わせて再利用できます。

CSS：

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

HTML：

<a class="btn btn-info disabled">Link Text</a>

JS：

$(function(){
    $('a.disabled').on('click',function(event){
        event.preventDefault();
    }).removeClass('disabled');
});
3
Mike