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

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

アンカーが指定されたをたどらないようにするには、次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がリンクを無効にする

私が現在取り組んでいるアプリは、JavaScriptと組み合わせたCSSスタイルでそれを行います。

a.disabled { color:gray; }

それから私が呼び出すリンクを無効にしたいときはいつでも

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

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

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

ここで私がずっと好きな答えを見つけました

このように見えます：

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

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

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

}); 

より良い解決策は、無効なデータ属性をオンに設定し、クリック時にチェックをアンカーすることです。この方法では、たとえば、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/

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

ポインターイベント CSSスタイルを使用します。（ラシャド・アナラが示唆したように）

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

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

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

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

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

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

下記のトライを有効にしたい場合

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

これはfalseを返すのと同じくらい簡単です。

例。

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

または

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

$('#divID').addClass('disabledAnchor');

CSSファイル

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

$("a").click(function(event) {
  event.preventDefault();
});

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

ページとのすべての相互作用をブロックしようとしている場合は、jQuery BlockUI Pluginを確認することをお勧めします

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

最初に、値を無効に設定する方法を理解する必要があります。そのためには、JQueryの属性関数を使用して、クリックやドキュメントの読み込みなどのイベントでその関数を実行させます。

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

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

@ michael-meadowsの回答で私はこれに気付かされましたが、彼はまだjQuery / JSを使用する必要があるシナリオを扱っていました。この場合、html自体の書き込みを制御できる場合は、hrefタグを単純にx-ingするだけでよいので、ソリューションは純粋なHTMLです。

hrefを保持するjQuery finaglingを使用しない他のソリューションでは、hrefに＃を配置する必要がありますが、その場合、ページが上部に跳ね返り、単純に古い無効にしたいだけです。または空のままにしますが、ブラウザによっては、トップにジャンプするなどの処理が行われ、IDEによると無効なHTMLです。しかし、明らかにaタグはHREFなしで完全に有効なHTMLです。

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

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

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

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

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

アンカータグとして動作する必要がない場合は、それを置き換えたいと思います。たとえば、アンカータグが

<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行だけ）、意味的にも正しくなります（リンクが不要になったため、リンクを設定する必要がないため）。

プロパティが無効になっている要素を無効または有効にします。

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

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