jQueryを使用してアンカーを有効または無効にするにはどうすればよいですか?
16 に答える
アンカーが指定された をたどらないようにする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に関するこの前の質問も参照してください。
私が現在取り組んでいるアプリは、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;
});
選択された回答は良くありません。
ポインター イベント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;
}
より良い解決策は、無効なデータ属性をオンに設定し、クリック時にチェックを固定することだと思います。このようにして、たとえば 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/
$('#divID').addClass('disabledAnchor');
cssファイルで
.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:white;
}
以下の行を試してください
$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");
<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;
})
$("a").click(function(event) {
event.preventDefault();
});
このメソッドが呼び出された場合、イベントのデフォルトのアクションはトリガーされません。
ページとのすべてのやり取りをブロックしようとしている場合は、jQuery BlockUI Pluginを参照してください。
それらを無効にする方法、または無効にする原因を実際に指定したことはありません。
まず、値を無効に設定する方法を理解する必要があります。そのためには、JQuery の属性関数を使用し、クリックやドキュメントの読み込みなどのイベントでその関数を発生させます。
上記の回答を組み合わせて、これを思いつきました。
a.disabled { color: #555555; cursor: default; text-decoration: none; }
$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault();
disabled プロパティを使用して、任意の要素を無効または有効にします。
// Disable
$("#myAnchor").prop( "disabled", true );
// Enable
$( "#myAnchor" ).prop( "disabled", false );
アンカー タグとして動作する必要がない場合は、まったく置き換えることをお勧めします。たとえば、アンカータグが次のような場合
<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 行) であり、意味的にも正しいです (リンクは必要ないため、リンクを設定する必要はありません)。