誰もがreturn false;
を使用せずにjqueryでリンクを無効にする方法を知っていますか?
具体的には、私がやろうとしているのは、アイテムのリンクを無効にし、jqueryを使ってクリックして何かをトリガーし、それからそのリンクを再度有効にすることです。
ありがとう。デイブ
_ update _ これがコードです。 .expanded
クラスが適用された後にそれがする必要があることは無効リンクを再び有効にすることです。
$('ul li').click(function(e) {
e.preventDefault();
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
//return false;
});
$('#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);
}
});
これを試して:
$("a").removeAttr('href');
編集 -
更新したコードから
var location= $('#link1').attr("href");
$("#link1").removeAttr('href');
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
$("#link1").attr("href", location);
私のように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が大好きです! ;-)
これは、簡潔さと最小限のスクリプト記述のために私が好む代替のcss/jQueryソリューションです。
css:
a.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
jQuery:
$('.disableAfterClick').click(function (e) {
$(this).addClass('disabled');
});
次のリンクをクリックするとリンクをクリックできます。
$('#link-id').unbind('click');
あなたは以下によってリンクを再び有効にすることができます、
$('#link-id').bind('click');
リンクに 'disabled'プロパティを使用することはできません。
Hrefルートに行けば、それを保存することができます
無効にするには:
$('a').each(function(){
$(this).data("href", $(this).attr("href")).removeAttr("href");
});
それから:を使って再び有効にします。
$('a').each(function(){
$(this).attr("href", $(this).data("href"));
});
ある場合には、クリックイベントはすでにどこか他の場所にバインドされていて、それを制御することができなかったため、このようにしなければならなかった。
私はリンクを無効にするためにjQueryでこれを常に使用します
$("form a").attr("disabled","disabled");
「チェックアウト中に項目を編集して野生の西部のクリックを防止するためのチェックアウト」機能に対する私のお気に入り
$('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>
そして今、あなたはリンクに無効なプロパティを使用することができます
乾杯!
好きなようにリンクを隠したり表示したりできます
$(link).hide();
$(link).show();
ここ と答えるはずです。
この優雅な解決策をありがとう@Willと@Matt。
jQuery('#path .to .your a').each(function(){
var $t = jQuery(this);
$t.after($t.text());
$t.remove();
});
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;
}
単にものを起動し、フラグを設定し、falseを返します。 flagが設定されている場合 - 何もしません。
unbind()
はjQuery 3
で非推奨になりました。代わりにoff()
メソッドを使用してください。
$("a").off("click");
これはjQueryとは関係ないことを私は知っていますが、いくつかの簡単なCSSでリンクを無効にすることができます。
a[disabled] {
z-index: -1;
}
hTMLは次のようになります。
<a disabled="disabled" href="/start">Take Survey</a>
これは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; ", ""));
});