web-dev-qa-db-ja.com

jQueryがリンクを無効にする

誰もがreturn false;を使用せずにjqueryでリンクを無効にする方法を知っていますか？

具体的には、私がやろうとしているのは、アイテムのリンクを無効にし、jqueryを使ってクリックして何かをトリガーし、それからそのリンクを再度有効にすることです。

ありがとう。デイブ

_ update _ これがコードです。 .expandedクラスが適用された後にそれがする必要があることは無効リンクを再び有効にすることです。

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});
jqueryhyperlink
274
davebowker
$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

これは、指定されたhrefを訪問するというハイパーリンクのデフォルトの動作を妨げます。

JQueryから チュートリアル ：

クリックイベントやその他のほとんどのイベントでは、イベントハンドラでevent.preventDefault（）を呼び出すことで、デフォルトの動作（ここではjquery.comへのリンクをたどる）を防ぐことができます。

特定の条件が満たされた場合（たとえば何かが隠されている場合）にのみpreventDefault()を使いたい場合は、クラス expansion を使ってulの可視性をテストできます。表示されている（つまり隠されていない）場合は、ifステートメントが入力されないため、リンクは通常どおり起動します。したがって、デフォルトの動作は妨げられません。

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});
353
karim79

これを試して：

$("a").removeAttr('href');

編集 -

更新したコードから

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);
102
TStamper

私のようにGoogle経由でここに来た人のために - これは別のアプローチです：

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

覚えておいてください：これはCSSクラスだけではありません

class = "ボタンスタイル"

しかしまたこれら二つ

class = "ボタンスタイル無効"

そのため、jQueryを使って他のクラスを簡単に追加および削除できます。 hrefに触れる必要はありません...

私はjQueryが大好きです！ ;-)

63
Hein

これは、簡潔さと最小限のスクリプト記述のために私が好む代替のcss/jQueryソリューションです。

css：

a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

jQuery：

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});
51
Peter DeWeese

次のリンクをクリックするとリンクをクリックできます。

$('#link-id').unbind('click');

あなたは以下によってリンクを再び有効にすることができます、

$('#link-id').bind('click');

リンクに 'disabled'プロパティを使用することはできません。

16
Kailas Mane

Hrefルートに行けば、それを保存することができます

無効にするには：

$('a').each(function(){
    $(this).data("href", $(this).attr("href")).removeAttr("href");
});

それから：を使って再び有効にします。

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

ある場合には、クリックイベントはすでにどこか他の場所にバインドされていて、それを制御することができなかったため、このようにしなければならなかった。

14
jBelanger

私はリンクを無効にするためにjQueryでこれを常に使用します

$("form a").attr("disabled","disabled");
6
matox

「チェックアウト中に項目を編集して野生の西部のクリックを防止するためのチェックアウト」機能に対する私のお気に入り

$('a').click(function(e) {
    var = $(this).attr('disabled');
    if (var === 'disabled') {
        e.preventDefault();
    }
});

だから私は上で説明したように "編集モード"の間に第二のアクションツールバーのすべての外部リンクが無効にされることを望むなら、私は編集機能に追加する

$('#actionToolbar .external').attr('disabled', true);

火災後のリンク例：

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

そして今、あなたはリンクに無効なプロパティを使用することができます

乾杯！

4
Lahmizzar

好きなようにリンクを隠したり表示したりできます

$(link).hide();
$(link).show();
3
David Fawzy

ここ と答えるはずです。

この優雅な解決策をありがとう@Willと@Matt。

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});
3
warmth

hTMLリンクの例：

        <!-- boostrap button + fontawesome icon -->
        <a class="btn btn-primary" id="BT_Download" target="blank" href="DownloadDoc?Id=32">
        <i class="icon-file-text icon-large"></i>
        Download Document
        </a>

jQueryでこれを使う

    $('#BT_Download').attr('disabled',true);

これをcssに追加します。

    a[disabled="disabled"] {
        pointer-events: none;
    }
3
Ch'nycos

単にものを起動し、フラグを設定し、falseを返します。 flagが設定されている場合 - 何もしません。

2
Michał Chaniewski

unbind()はjQuery 3で非推奨になりました。代わりにoff()メソッドを使用してください。

$("a").off("click");
1
shintaroid

これはjQueryとは関係ないことを私は知っていますが、いくつかの簡単なCSSでリンクを無効にすることができます。

a[disabled] {
  z-index: -1;
}

hTMLは次のようになります。

<a disabled="disabled" href="/start">Take Survey</a>
0
Cruz Nunez

これはonclick属性がインラインに設定されているリンクに対して機能します。これにより、後で有効にするために "return false"を削除することもできます。

        //disable all links matching class
        $('.yourLinkClass').each(function(index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", "return false; " + OnClickValue);
        });

        //enable all edit links
        $('.yourLinkClass').each(function (index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", OnClickValue.replace("return false; ", ""));
        });
0
mga911