web-dev-qa-db-ja.com

jQueryを使用してハイパーリンクを無効にする

<a href="gohere.aspx" class="my-link">Click me</a>

やった

$('.my-link').attr('disabled', true);

しかし、それはうまくいきませんでした

Jqueryを使用してハイパーリンクを無効にする簡単な方法はありますか？ hrefを削除しますか？ hrefをいじるのはやめたい。したがって、hrefを削除せずにそれを行うことができれば、それは素晴らしいことです。

jquerydisable-link
59
sarsnake

Falseを返すクリックハンドラーをバインドできます。

$('.my-link').click(function () {return false;});

再度有効にするには、ハンドラーのバインドを解除します。

$('.my-link').unbind('click');

disabledは、フォーム入力専用に設計されているため機能しないことに注意してください。

jQueryはこれをすでに予測しており、jQuery 1.4.3のショートカットを提供します。

$('.my-link').bind('click', false);

そして、バインドを解除/再有効化するには：

$('.my-link').unbind('click', false);
118
David Tang

私はそれが古い質問であることを知っていますが、まだ解決されていないようです。私の解決策に従ってください...

このグローバルハンドラーを追加するだけです。

$('a').click(function()
{
     return ($(this).attr('disabled')) ? false : true;
});

以下に簡単なデモを示します。 http://jsbin.com/akihik/

無効な属性を持つすべてのリンクに異なるスタイルを与えるために、CSSを少し追加することもできます。

例えば

a[disabled]
{
    color: grey; 
}

とにかく、disabled属性はaタグには有効ではないようです。 w3c仕様に従うことを希望する場合は、html5準拠のdata-disabled属性を簡単に採用できます。この場合、前のスニペットを変更し、$(this).data('disabled')を使用する必要があります。

33
Luciano Mammino

href属性を削除することは、間違いなく進むべき道のようです。何らかの理由で後で必要になる場合は、別の属性に保存するだけです。

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

これは、カスタムCSSを記述せずにリンクを無効に表示する唯一の方法です。クリックハンドラをfalseにバインドするだけで、リンクは通常のリンクのように見えますが、クリックしても何も起こらず、ユーザーを混乱させる可能性があります。クリックハンドラーのルートに行く場合は、少なくとも.addClass("link-disabled")も使用し、そのクラスとのリンクを通常のテキストのように表示するCSSを記述します。

10
Riley Dutton
$('.my-link').click(function(e) { e.preventDefault(); });

次を使用できます。

$('.my-link').click(function(e) { return false; });

しかし、多くのjQueryコードで広く使用されているにもかかわらず、私はこれをより謎めいたものとして自分で使用することを好みません。

8
Neil

pointer-events CSSプロパティは、サポートに関して少し欠けています（ caniuse.com ）が、非常に簡潔です：

.my-link { pointer-events: none; }
7
tiffon
function EnableHyperLink(id) {
        $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
        $('#' + id).addClass('enable-link');
        $('#' + id).removeClass('disable-link');
    }

    function DisableHyperLink(id) {
        $('#' + id).addClass('disable-link');
        $('#' + id).removeClass('enable-link');
        $('#' + id).removeAttr('onclick');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}
4
Abhishek Bandil

Pointer-events：nonを含むクラスを追加します

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');
2
Andrien Pecson

disabled属性は、すべてのHTML要素で有効とは限りません。 MSDNの記事 を参照してください。それと無効の適切な値は、単に「無効」です。最善のアプローチは、falseを返すクリック関数をバインドすることです。

2
wsanville

以下はリンクをテキストに置き換えます

$('a').each(function () {
    $(this).replaceWith($(this).text());
});

編集：

上記のコードはテキストのみのハイパーリンクで機能し、画像では機能しません。画像リンクで試してみると、画像は表示されません。

このコードを画像リンクと互換性があるようにするには、次のようにします

// below given function will replace links with images i.e. for image links
$('a img').each(function () {
    var image = this.src;
    var img = $('<img>', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$('a').each(function () {
    $(this).replaceWith($(this).text());
});

説明：上記のコードスニペットでは、最初のスニペットですべての画像リンクをその画像のみに置き換えています。その後、テキストリンクをテキストに置き換えます。

1
IT ppl

これもうまくいきます。シンプルで、ライトであり、jQueryを使用する必要はありません。

<a href="javascript:void(0)">Link</a>
0
Bradley Flood