内部にリンクボタンがあり、<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クラスを定義する必要がありますが、CSSクラスの代わりに属性pointer-events: noneを再利用 するとdisabledどうなるでしょうか。厳密にdisabledはサポートされて<a>いませんが、ブラウザは不明な属性について文句を言うことはありません。disabled属性IEを使用すると無視されますが、pointer-eventsIE固有のdisabled属性が優先されます。他のCSS準拠ブラウザは、不明な disabled属性を無視して尊重しpointer-eventsます。説明するより書くほうが簡単：

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

IE 11のもう1つのオプションは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なしで動作するという利点があります。残念ながら（もちろん）tabindexCSSから変更することはできません。

インターセプトクリック

hrefJavaScript関数にa を使用して、条件（または無効化された属性自体）を確認し、ケースでは何もしません。

$("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（undefined属性が設定されていない場合はjQuery 1.6以降が常に返されます）がis()はるかに明確です（このヒントを提供してくれたDave Stewartに感謝します）。私が使用している、ここで注意してくださいdisabled、あなたはこの心配している場合、クラスと属性を交換し、交換する、非標準的な方法で属性を.is("[disabled]")して.hasClass("disabled")（追加や削除をaddClass()してremoveClass()）。

ZoltánTamá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有効としてまだ描かれています。

Accessible Rich Internet Applications（ARIA）

属性/クラスaria-disabled="true"とともに属性も含めることを忘れないでくださいdisabled。

CSSで修正を取得しました。

td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

上記のcssをアンカータグに適用すると、クリックイベントが無効になります。

詳細については、このリンクをチェックアウトしてください

ソリューションを投稿してくれた皆さん（特に@AdrianoRepetti）のおかげで、私は複数のアプローチを組み合わせて、より高度なdisabled機能を提供しました（ブラウザ間で動作します）。コードは以下のとおりです（ES2015とお好みに応じたcoffeescriptの両方）。

これにより、複数のレベルの防御が提供されるため、無効とマークされたアンカーは実際にそのように動作します。このアプローチを使用すると、次のことができないアンカーが得られます。

• クリック
• タブを押してリターンを押す
• タブを押すと、フォーカスが次のフォーカス可能な要素に移動します
• アンカーが後で有効になるかどうかを認識している

方法

1. これは防御の最前線なので、このCSSを含めます。これは、使用するセレクターがa.disabled

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

2. 次に、このクラスを準備完了時にインスタンス化します（オプションのセレクターを使用）。

     new AnchorDisabler()

ES2015クラス

npm install -S key.js

import {Key, Keycodes} from 'key.js'

export default class AnchorDisabler {
  constructor (config = { selector: 'a.disabled' }) {
    this.config = config
    $(this.config.selector)
      .click((ev) => this.onClick(ev))
      .keyup((ev) => this.onKeyup(ev))
      .focus((ev) => this.onFocus(ev))
  }

  isStillDisabled (ev) {
    //  since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
    let target = $(ev.target)
    if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
      return true
    }
    else {
      return false
    }
  }

  onFocus (ev) {
    //  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
    if (!this.isStillDisabled(ev)) {
      return
    }

    let focusables = $(':focusable')
    if (!focusables) {
      return
    }

    let current = focusables.index(ev.target)
    let next = null
    if (focusables.eq(current + 1).length) {
      next = focusables.eq(current + 1)
    } else {
      next = focusables.eq(0)
    }

    if (next) {
      next.focus()
    }
  }

  onClick (ev) {
    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }

  onKeyup (ev) {
    // We are only interested in disabling Enter so get out fast
    if (Key.isNot(ev, Keycodes.ENTER)) {
      return
    }

    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }
}

Coffescriptクラス：

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

要素を試してください：

$(td).find('a').attr('disabled', 'disabled');

Chromeでリンクを無効にするとうまくいきます：http : //jsfiddle.net/KeesCBakker/LGYpz/。

Firefoxはうまく動作しないようです。この例は機能します：

<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>

$('#a1').attr('disabled', 'disabled');

$(document).on('click', 'a', function(e) {
    if ($(this).attr('disabled') == 'disabled') {
        e.preventDefault();
    }
});

注：将来の無効化/有効化されたリンクの「ライブ」ステートメントを追加しました。
注2：「ライブ」を「オン」に変更。

Bootstrap 4.1は、名前付きのクラスdisabledとaria-disabled="true"属性を提供します。

例」

<a href="#" 
        class="btn btn-primary btn-lg disabled" 
        tabindex="-1" 
        role="button" aria-disabled="true"
>
    Primary link
</a>

詳細はgetbootstrap.comにあります

動的に作成したい場合you don't want to care if it is button or ancorは、JSスクリプトよりもそのようなものが必要です

   let $btn=$('.myClass');
   $btn.attr('disabled', true);
   if ($btn[0].tagName == 'A'){
        $btn.off();
        $btn.addClass('disabled');
        $btn.attr('aria-disabled', true);
   }

しかし注意してください

ソリューションは、クラスとのリンクでのみ機能しますbtn btn-link。

ブートストラップがcard-linkクラスの使用を推奨する場合があります。この場合、ソリューションは機能しません。

私は属性、、<a href="..." disabled="disabled">またはクラスのいずれかで動作する以下の解決策に終わりました<a href="..." class="disabled">：

CSSスタイル：

a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

JavaScript（jQuery対応）：

$("a[disabled], a.disabled").on("click", function(e){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        e.preventDefault();
})

リンクを無効にすることはできません。そのクリックイベントが発生しないようにするにRemoveはaction、そのリンクから単にを呼び出します。

$(td).find('a').attr('href', '');

詳細情報：- 無効にできる要素

私は次のようなことをします

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

このようなものが動作するはずです。無効にするリンクのクラスを追加し、誰かがリンクをクリックするとfalseを返します。それらを有効にするには、クラスを削除するだけです。

タッチデバイス上の別のページにアクセスするリンクを無効にするには：

if (control == false)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

Razor（.cshtml）では、次のことができます。

@{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>

これを使用して、asp.netのハイパーリンクまたはHTMLのリンクボタンを無効にすることができます。

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

他に可能な方法が1つあり、私が一番好きな方法があります。基本的には、divを配置してz-indexを操作することで、ライトボックスがページ全体を無効にするのと同じ方法です。これが私のプロジェクトからの関連スニペットです。これはすべてのブラウザで動作します!!!!!

JavaScript（jQuery）：

var windowResizer = function(){
        var offset = $('#back').offset();   
        var buttontop = offset.top;
        var buttonleft = offset.left;
        $('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
        offset = $('#next').offset();
        buttontop = offset.top;
        buttonleft = offset.left;
        $('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
}

$(document).ready(function() {
    $(window).resize(function() {   
        setTimeout(function() {
            windowResizer();
        }, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast
    });
});

そしてhtmlで

<a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a>
<a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a>
<img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
<img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>

したがって、リサイザはアンカー（画像は単なる矢印です）の位置を見つけ、無効化機能を上に配置します。無効化機能の画像は、半透明の灰色の四角形（リンク内のHTML内の無効化機能の幅/高さを変更してリンクに一致するようになっています）で、無効化されていることを示しています。フローティングを使用すると、ページのサイズを動的に変更でき、無効化機能はwindowResizer（）でも同様になります。あなたはグーグルを通じて適切な画像を見つけることができます。簡単にするために、関連するcssをインラインで配置しました。

次に、いくつかの条件に基づいて、

$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

これらの多くは考えすぎです。など、必要なもののクラスを追加しますdisabled_link。
次に、CSSに.disabled_link { display: none }
Boomを設定します。これで、ユーザーはリンクを見ることができなくなり、クリックすることを心配する必要がなくなります。クリック可能なリンクを満たすために何かをする場合は、jQuery：でクラスを削除するだけです
$("a.disabled_link").removeClass("super_disabled")。ブーム！