web-dev-qa-db-ja.com

jQueryを使用してアンカーを有効または無効にする方法は？

JQueryを使用してアンカーを有効または無効にする方法は？

jqueryhtmlanchor
147
Senthil Kumar Bhaskaran

アンカーが指定されたhrefをたどらないようにするには、 preventDefault() を使用することをお勧めします。

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

見る：

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

SOに関するこの前の質問も参照してください。

jQueryはリンクを無効にします

192
karim79

現在作業中のアプリは、JavaScriptスタイルとCSSスタイルを組み合わせて使用​​しています。

a.disabled { color:gray; }

その後、私が呼び出すリンクを無効にしたいときはいつでも

$('thelink').addClass('disabled');

次に、「thelink」タグのクリックハンドラで、常に最初にチェックを実行します

if ($('thelink').hasClass('disabled')) return;
113
AgileJon

私ははるかに好きな答えを見つけました こちら

次のようになります。

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

有効にするには、href属性を設定する必要があります

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

これにより、アンカー要素が通常のテキストになり、その逆のように見えます。

40
Michael Meadows
$("a").click(function(){
                alert('disabled');
                return false;

});
12
AlexC

より良い解決策は、無効化されたデータ属性をオンに設定し、クリック時にチェックを固定することだと思います。このようにして、たとえばjavascriptはajax呼び出しまたはいくつかの計算で終了します。無効にしない場合は、数回すばやくクリックできますが、これは望ましくありません...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

Jsfiddleの例を作成しました： http://jsfiddle.net/wgZ59/76/

12
Michal B.

Falseを返すのと同じくらい簡単です。

例.

jQuery("li a:eq(0)").click(function(){
   return false;
})

または

jQuery("#menu a").click(function(){
   return false;
})
8
kim edgard

以下の行を試してください

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz、<a>タグを無効にしてもhrefは機能するので、hrefも削除する必要があります。

有効にしたい場合は、以下の行を試してください

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
8
Victor AJ

選択された回答は良くありません。

pointer-eventsCSSスタイルを使用します。 （ラシャド・アナラが示唆したように）

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events を参照してください。ほとんどのブラウザでサポートされています。

次のようなグローバルCSSルールがある場合、アンカーに「無効」属性を追加するだけで十分に機能します。

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}
8
vitrilo
$('#divID').addClass('disabledAnchor');

CSSファイルで

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}
7
Rashad Annara
$("a").click(function(event) {
  event.preventDefault();
});

このメソッドが呼び出されると、イベントのデフォルトアクションはトリガーされません。

5
Mohssen Beiranvand

ページとのすべての対話をブロックしようとしている場合は、 jQuery BlockUI Plugin をご覧ください。

4
Sam Hasler

無効にする方法や、無効にする原因を実際に指定したことはありません。

まず、 JQueryの属性関数 を使用し、その関数が event で発生するように、値を無効に設定する方法を見つけ出します。 クリック 、または 読み込み中 ドキュメント。

4
Sneakyness

上記の回答を組み合わせて、私はこれを思いつきました。

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault();
1
LawMan

アンカータグ内にテキストまたはhtmlコンテンツを配置する必要があるが、その要素がクリックされたときにアクションがまったく実行されないようにする必要がある場合（ページネーターリンクを無効状態にする場合など）現在のページ）、単にhrefを切り取ります。 ;）

<a>3 (current page, I'm totally disabled!)</a>

@ michael-meadowsの答えは私にこれを思いとどまらせましたが、彼はまだjQuery/JSを使用する必要がある、または作業しているシナリオに対処していました。この場合、ifhtml自体の記述を制御できます。単にhrefタグをx-ingするだけでよいので、解決策は純粋なHTMLのものです！

Hrefを保持するjQueryフィナリングを使用しない他のソリューションでは、hrefに＃を入力する必要がありますが、ページがトップにバウンスし、単に古い無効にするだけです。または、空のままにしておきますが、ブラウザによっては、トップへジャンプするなどの処理が行われ、IDEによると無効なHTMLです。しかし、明らかにaタグは、HREFを使用しない完全に有効なHTMLです。

最後に、あなたは言うかもしれません：わかりました、なぜ単にタグ全体をダンプしないのですか？使用できないことが多いため、aタグは、Bootstrapのページネータのように、使用しているCSSフレームワークまたはコントロールのスタイル設定に使用されます。

http://Twitter.github.io/bootstrap/components.html#pagination

1
Nicholas Petersen

Disabledプロパティを持つ要素を無効または有効にします。

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );
0
RitchieD

アンカータグとして動作する必要がない場合は、まったく置き換えることをお勧めします。たとえば、アンカータグが

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

次に、jqueryを使用して、リンクの代わりにテキストを表示する必要があるときにこれを行うことができます。

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

このようにして、アンカータグをdivタグで簡単に置き換えることができます。これははるかに簡単（2行だけ）であり、意味的にも正しい（今はリンクが必要ないため、リンクはないはずです）

0
adeel41