web-dev-qa-db-ja.com

HTMLリンクを無効にする方法

無効にしなければならない<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');

注 - アンカータグは動的に登録されるため、クリック機能を登録解除することはできません。リンクを無効モードで表示する必要があります。

javascriptjqueryhtmlcss
239
Ankit

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

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>

Workaround

おそらく、pointer-events: noneのCSSクラスを定義する必要がありますが、CSSクラスの代わりにdisabled属性をreuse使用するとどうなりますか？厳密に言えばdisabledは<a>ではサポートされていませんが、ブラウザはunknown属性について文句を言いません。 disabled属性を使用すると、IEはpointer-eventsを無視しますが、IE固有のdisabled属性を尊重します。他のCSS準拠ブラウザはunknowndisabled属性を無視し、pointer-eventsを尊重します。説明するより書く方が簡単：

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

IE 11の別のオプションは、リンク要素のdisplayをblockまたはinline-blockに設定することです：

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

IEをサポートする必要がある場合（そしてHTMLを変更できる場合）、これはportableソリューションかもしれませんが、...

pointer-eventsはポインターイベントのみを無効にすることに注意してください。 キーボードを使用してリンクをナビゲートできます。その後、ここで説明する他の手法のいずれかを適用する必要もあります。

フォーカス

上記のCSSテクニックと組み合わせて、要素がフォーカスされるのを防ぐためにtabindexを非標準的な方法で使用できます。

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

多くのブラウザとの互換性を確認したことがないので、これを使用する前に自分でテストすることをお勧めします。 JavaScriptなしで動作することには利点があります。残念ながら（しかし明らかに）tabindexはCSSから変更できません。

クリックを傍受する

JavaScript関数にhrefを使用し、条件（または無効化された属性自体）を確認して、何もしないでください。

$("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ánTamási コメントに記載 that "場合によっては、クリックイベントは既に「実際の」関数にバインドされています（たとえば、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");
});

個人的に私はこのソリューションがあまり好きではありません（無効化されたリンクでさらに行う必要がない場合）が、リンクをたどるさまざまな方法のためにより互換性があるかもしれません.

偽のクリックハンドラー

return falseのあるonclick関数を追加/削除すると、リンクはたどられません。リンクを無効にするには：

$("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フレームワークを使用している場合、disabledリンクが適切にスタイル設定されていないことがわかります。たとえば、Bootstrap 3.xはこのシナリオを処理し、ボタンはdisabled属性と.disabledクラスの両方で正しくスタイル設定されます。代わりに、リンクをクリアする（または他のJavaScriptテクニックのいずれかを使用する）場合、hrefのない<a>は有効なままであるため、スタイル設定も処理する必要があります。

アクセス可能なリッチインターネットアプリケーション（ARIA）

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

481
Adriano Repetti

CSSで修正しました。

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

アンカータグに適用されたときに上記のcssはクリックイベントを無効にします。

詳細はこちら link をご覧ください。

21
Ankit

解決策（特に@AdrianoRepetti）を投稿してくれた皆さんのおかげで、私はいくつかのより高度なdisabled機能を提供するために複数のアプローチを組み合わせました（そしてそれはクロスブラウザで動作します）。コードは以下のとおりです（ES2015とコーヒースクリプトの両方があなたの好みに基づいています）。

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

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

の仕方

  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
  }
}

コスクリプトクラス：

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
11
kross

要素を試してください：

$(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();
    }
});

注：将来の無効化/有効化されたリンクに 'live'ステートメントを追加しました。
注2： 'live'を 'on'に変更しました。

5
Kees C. Bakker

私は以下の解決策に行き着きました。それは属性、<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();
})
1
isapir

私は何かをするだろう

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

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

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

0
mkk

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

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

リンクを無効にすることはできません。クリックイベントを発生させたくない場合は、そのリンクのRemoveを単にactionにします。

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

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

0
Pranav

ブートストラップ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にあります

ですから、もしあなたがそれを動的にしたいのであれば、そしてJSスクリプトの中よりもyou don't want to care if it is button or ancorのようなものが必要です。

   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クラスの使用を推奨することがあります。この場合の解決策 は機能しません 。

0
Yevgeniy Afanasyev