質問

の中にリンクボタンがあります。 <td> を無効化しなければなりません。これはIEで動作しますが、FirefoxとChromeでは動作しません。 構造は次のとおりです。 <td> . の中にコンテナを追加することができません。 <td> (div/spanのような)

下記をすべて試しましたが、Firefox（1.4.2 js使用）では動作しません。

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

注意：アンカータグのクリック機能は動的に登録されるため、登録を解除することはできません。また、リンクは無効モードで表示しなければなりません。

どうすればいいですか？

リンクを無効化することはできません（ポータブルな方法で）。これらのテクニックのいずれかを使用できます（それぞれ利点と欠点があります）。

CSSによる方法

これは 正しい方法 (が、後述するように、ほとんどのブラウザがサポートするようになれば、これを実行する必要があります。

a.disabled {
    pointer-events: none;
}

例えば、Bootstrap 3.xがそうです。現在（2016年）、Chrome、FireFox、Opera（19以上）のみでよくサポートされています。Internet Explorerはバージョン11から対応し始めましたが リンク用ではない のような外側の要素で利用可能です。

span.disable-links {
    pointer-events: none;
}

とともに。

<span class="disable-links"><a href="#">...</a></span>

ワークアラウンド

のCSSクラスを定義する必要があります。 pointer-events: none が、もし 再利用 その disabled 属性の代わりに、CSS クラスを使用するのですか？厳密には disabled はサポートされていません。 <a> が、ブラウザから文句を言われることはありません。 不明 属性があります。を使用すると disabled 属性は IE に無視されます。 pointer-events が、IE特有の disabled 属性は無視され、他の CSS 準拠のブラウザは 不明 disabled 属性と名誉 pointer-events . 説明するより書く方が簡単。

a[disabled] {
    pointer-events: none;
}

IE11の場合、もう一つの方法として display リンク要素の block または inline-block :

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

になる可能性があることに注意してください。 ポータブル IEをサポートする必要がある場合（そしてHTMLを変更できる場合）には解決策となりますが

以上のことから、以下のことに注意してください。 pointer-events は、ポインタイベントのみを無効にします。 リンクはキーボードで操作可能です。 の場合、ここで説明した他のテクニックのいずれかを適用する必要があります。

フォーカス

上記の CSS テクニックと合わせて、次のような方法もあります。 tabindex を使用することで、ある要素にフォーカスが当たらないようにすることができます。

<a href="#" disabled tabindex="-1">...</a>

多くのブラウザで互換性を確認したことはないので、使用する前に自分でテストしてみるとよいでしょう。JavaScriptを使わずに動作するのが特徴です。残念ながら（でも当たり前だけど） tabindex はCSSから変更できません。

クリックを遮断する

を使用します。 href をJavaScriptの関数に渡して、条件（あるいはdisabled属性そのもの）をチェックし、万が一にも何もしないようにします。

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

リンクを無効にするには、次のようにします。

$("td > a").attr("disabled", "disabled");

再有効化する場合

$("td > a").removeAttr("disabled");

の代わりに .is("[disabled]") を使用することができます。 .attr("disabled") != undefined (jQuery 1.6+は常に undefined 属性が設定されていない場合）しかし is() の方がより明確です（このヒントをくれたDave Stewartに感謝します）。ここで私は disabled 属性は非標準的な方法で使用されています。 .is("[disabled]") で .hasClass("disabled") (追加と削除は addClass() と removeClass() ).

Zoltán Tamási（ゾルタン・タマーシ コメントで指摘 その (例えば knockoutjs を使っている場合) その場合、イベントハンドラの順序が問題になることがあります。そこで、リンクが無効になるように、リンクの touchstart , mousedown と keydown イベントを使用します。これはいくつかの欠点があります (リンク上で開始されたタッチスクロールを阻止します)"。 が、キーボードイベントを処理することで、キーボードナビゲーションを防止できるメリットもあります。

ただし、もし href がクリアされていない場合、ユーザーが手動でそのページを訪問することが可能です。

リンクを解除する

をクリアします。 href 属性で指定します。このコードでは、イベントハンドラを追加するのではなく、リンクそのものを変更します。リンクを無効にするには、このコードを使用します。

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

そして、こちらは再有効化するためのものです。

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

個人的には、この解決策はあまり好きではありませんが（無効化されたリンクにこれ以上手を加える必要がないのであれば）、これは かもしれない リンクの引き方が多様であるため、互換性がある。

偽のクリックハンドラ

を追加/削除します。 onclick 関数で return false を指定すると、リンクが張られなくなります。リンクを無効にするには

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

再有効化する場合

$("td > a").removeAttr("disabled").off("click");

最初の解決策ではなく、この解決策を好む理由はないと思います。

スタイリング

スタイリングはさらに簡単で、リンクを無効にするためにどのようなソリューションを使用しているにせよ、私たちはそのために disabled 属性を使用することで、以下のようなCSSルールを使用することができます。

a[disabled] {
    color: gray;
}

属性の代わりにクラスを使っている場合。

a.disabled {
    color: gray;
}

UIフレームワークを使用している場合、以下のように表示されることがあります。 無効 のリンクが正しくスタイルされません。例えば Bootstrap 3.x はこのシナリオを処理し、ボタンは disabled 属性と .disabled クラスがあります。代わりに、リンクをクリアする（あるいは他のJavaScriptテクニックの一つを使う）場合、スタイル付けも処理しなければなりません。 <a> を使用せず href は有効として描画されたままです。

アクセシブルリッチインターネットアプリケーション(ARIA)

属性も忘れずに aria-disabled="true" とともに disabled 属性/クラスで指定します。