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

Question

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

やった

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

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

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

Answer 1

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);

Answer 2

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

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

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

ここに簡単なデモがあります: http://jsbin.com/akihik/3

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

例えば

a[disabled]
{
    color: grey; 
}

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

Answer 3

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

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

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

Answer 4

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

あなたが使用することができます：

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

しかし、多くのjQueryコードで広く使用されているにもかかわらず、これはより不可解であるため、自分で使用するのは好きではありません。

Answer 5

サポートに関しては、pointer-eventsCSS プロパティが少し不足しています ( caniuse.com ) が、非常に簡潔です。

.my-link { pointer-events: none; } 

Answer 6

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

Answer 7

pointer-events:non を含むクラスを追加する

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


$(this).addClass('active');

Answer 8

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

Answer 9

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

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

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

Answer 10

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

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

Answer 11

試す：

$(this).prop( "disabled", true );