152

jQueryを使用してアンカーを有効または無効にするにはどうすればよいですか?

4

16 に答える 16

194

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

于 2009-07-22T11:33:20.140 に答える
116

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

a.disabled { color:gray; }

次に、呼び出したリンクを無効にしたいときはいつでも

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

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

if ($('thelink').hasClass('disabled')) return;
于 2009-07-22T11:39:27.773 に答える
41

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

次のようになります。

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

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

于 2010-09-17T15:31:22.420 に答える
12
$("a").click(function(){
                alert('disabled');
                return false;

}); 
于 2009-07-22T11:33:03.917 に答える
12

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

ポインター イベントCSS スタイルを使用します。(Rashad Annara が提案したように)

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

次のようなグローバル CSS ルールがある場合は、単純に "disabled" 属性をアンカーに追加するだけでうまくいきます。

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}
于 2016-03-02T11:45:38.573 に答える
12

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

于 2012-03-21T10:27:29.230 に答える
10
$('#divID').addClass('disabledAnchor');

cssファイルで

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}
于 2015-08-16T05:31:11.380 に答える
10

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

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

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

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

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
于 2014-08-05T10:52:26.200 に答える
8

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

元。

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

また

jQuery("#menu a").click(function(){
   return false;
})
于 2010-06-22T06:19:54.060 に答える
5
$("a").click(function(event) {
  event.preventDefault();
});

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

于 2010-12-18T18:19:16.020 に答える
4

ページとのすべてのやり取りをブロックしようとしている場合は、jQuery BlockUI Pluginを参照してください。

于 2009-07-22T11:38:22.687 に答える
4

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

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

于 2009-07-22T11:39:01.190 に答える
1

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

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

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 
于 2015-09-23T19:35:17.613 に答える
0

disabled プロパティを使用して、任意の要素を無効または有効にします。

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

// Enable
$( "#myAnchor" ).prop( "disabled", false );
于 2016-02-08T16:33:10.043 に答える
0

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

<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 行) であり、意味的にも正しいです (リンクは必要ないため、リンクを設定する必要はありません)。

于 2014-09-29T14:19:30.453 に答える