アンカーリンクをクリック不可または無効にするにはどうすればよいですか？

ユーザーがクリックしたときに無効にするアンカーリンクがあります。または、テキストの周囲からアンカータグを削除しますが、テキストは確実に保持してください。

<a href='' id='ThisLink'>some text</a>

ボタンを使用してこれを簡単に.attr("disabled", "disabled");
追加できます。無効化されたプロパティを正常に追加しましたが、リンクはまだクリック可能でした。
テキストに下線が引かれていてもいなくてもかまいません。

どんな手掛かり？

間違ったミュージシャンをクリックすると、「間違った」が追加され、クリックできなくなります。
クリックして正しい場合、「素晴らしい」が追加され、すべての<a>タグが無効になります。

私はあなたが何を求めているのかを理解しました（私は願っています）。これは醜い解決策です

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

最もクリーンな方法は、クリックを無効にする場合に、pointer-events：noneを含むクラスを追加することです。通常のラベルのように機能します。

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

ポインターイベント CSSスタイルを使用します。（ジェイソンマクドナルドが示唆したように）

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-eventsを参照してください。ほとんどのブラウザでサポートされています。

アンカーに「無効」属性を追加するだけで、次のようなグローバルCSSルールがある場合に機能します。

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

$('a').removeAttr('href')

または

$('a').click(function(){ return false})

状況による

ブートストラップは.disabledクラスを提供します。是非ご利用ください。

ただし、.disabledクラスは、「a」タグにすでにクラス「btn」がある場合にのみ機能します。古い「a」タグでは機能しません。btnそれはスタイル的な意味合いを持っているように、クラスは、いくつかの状況では適切ではないかもしれません。内部では.disabledクラスがに設定さpointer-eventsれているためnone、CSSでSaroj AryalとVitriloが提案したのと同じことを実行できます。（このアドバイスをありがとう、レナイチンギル）。

cssクラスを追加します。

.disable_a_href{
    pointer-events: none;
}

これを追加jquery：

$("#ThisLink").addClass("disable_a_href"); 

hrefアンカータグから属性を削除するだけです。

最善の方法は、デフォルトのアクションを防止することです。アンカータグの場合、デフォルトの動作はhref指定されたアドレスへのリダイレクトです。

したがって、次のjavascriptはこの状況で最適に機能します。

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

onclickイベントを使用して、クリックアクションを無効にすることができます。

<a href='' id='ThisLink' onclick='return false'>some text</a>

または、<a>タグ以外のものを使用することもできます。

Jason MacDonaldのコメントは私にとってはうまくいき、Chrome、Mozila、IEでテストされました。

無効化の効果を示すために灰色が追加されました。

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

jqueryはアンカーリストの最初の要素のみを選択し、メタ文字（*）を追加して、idを持つすべての要素を選択して無効にしました#ThisLink。

$("#ThisLink*").addClass("disable_a_href"); 

これを1行のjQueryコードで記述します。

$('.hyperlink').css('pointer-events','none');

CSSファイルに書き込みたい場合

.hyperlink{
    pointer-events: none;
}

スタイルシートに次のクラスを作成します。

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

このクラスを次のように動的にリンクに追加します。

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

これを試して：

$('a').contents().unwrap();

単にSASSで：

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

これは、私が無効にするために使用した方法です。

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

これはこれを行う別の方法return falseです。リンクを無効にするのハンドラーが1回のクリック後に追加されます。

最も簡単な方法

あなたのhtmlで：

<a id="foo" disabled="true">xxxxx<a>

あなたのjsで：

$('#foo').attr("disabled", false);

属性として使用すると、完全に機能します