blocks|key|1497905|text|为了防止锚点跟随指定的href，我建议使用preventDefault()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1497906|//+jQuery+1.7%2B
$(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();
++++});
});|code-block|syntax|javascript|1497907|请参见：|1497908|http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29|1497909|也可以在上面看到这个问题：|1497910|jQuery+disable+a+link|1497911|entityMap|0|LINK|mutability|MUTABLE|url|1|2|https://stackoverflow.com/questions/970388/jquery-disable-a-link/970413#970413^0|B|4|L|G|L|G|0|0|0|0|0|1X|1|0|0|0|L|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|O|3|P|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|S|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|N]]|Z|$5|V|W|X|E|$Y|N]]|10|$5|V|W|X|E|$Y|11]]]]

To prevent an anchor from following the specified <code>href</code>, I would suggest using <a href="http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29" rel="noreferrer"><code>preventDefault()</code></a>:

<pre><code>// jQuery 1.7+
$(function () {
 $('a.something').on("click", function (e) {
 e.preventDefault();
 });
});

// jQuery &lt; 1.7
$(function () {
 $('a.something').click(function (e) {
 e.preventDefault();
 });

 // or 

 $('a.something').bind("click", function (e) {
 e.preventDefault();
 });
});
</code></pre>

See:

<a href="http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29" rel="noreferrer">http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29</a>

Also see this previous question on SO:

<a href="https://stackoverflow.com/questions/970388/jquery-disable-a-link/970413#970413">jQuery disable a link</a>

blocks|key|1283302|text|我目前正在开发的应用程序使用CSS样式与javascript相结合的方式来实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1283303|a.disabled+{+color:gray;+}|code-block|syntax|javascript|1283304|然后，每当我想禁用某个链接时，我都会调用|1283305|$('thelink').addClass('disabled');|1283306|然后，在“thelink”标签的click处理程序中，我总是首先运行一次检查|1283307|if+($('thelink').hasClass('disabled'))+return;|1283308|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The app I'm currently working on does it with a CSS style in combination with javascript.

<pre><code>a.disabled { color:gray; }
</code></pre>

Then whenever I want to disable a link I call

<pre><code>$('thelink').addClass('disabled');
</code></pre>

Then, in the click handler for 'thelink' a tag I always run a check first thing

<pre><code>if ($('thelink').hasClass('disabled')) return;
</code></pre>

blocks|key|1498231|text|我找到了一个我更喜欢的答案here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1498232|看起来像这样：|1498233|$(document).ready(function(){
++++$("a").click(function+()+{+
++++++++$(this).fadeTo("fast",+.5).removeAttr("href");+
++++});
});|code-block|syntax|javascript|1498234|启用将涉及设置href属性|1498235|$(document).ready(function(){
++++$("a").click(function+()+{+
++++++++$(this).fadeIn("fast").attr("href",+"http://whatever.com/wherever.html");+
++++});
});|1498236|这使您看起来锚点元素变成了普通文本，反之亦然。|1498237|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sitepoint.com/forums/showpost.php?p=3892743&postcount=4^0|D|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

I found an answer that I like much better <a href="http://www.sitepoint.com/forums/showpost.php?p=3892743&amp;postcount=4" rel="noreferrer">here</a> 

Looks like this:

<pre><code>$(document).ready(function(){
 $("a").click(function () { 
 $(this).fadeTo("fast", .5).removeAttr("href"); 
 });
});
</code></pre>

Enabling would involve setting the href attribute

<pre><code>$(document).ready(function(){
 $("a").click(function () { 
 $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
 });
});
</code></pre>

This gives you the appearance that the anchor element becomes normal text, and vice versa.

blocks|key|1497853|text|$("a").click(function(){
++++++++++++++++alert('disabled');
++++++++++++++++return+false;

});+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1497854|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("a").click(function(){
 alert('disabled');
 return false;

}); 
</code></pre>

blocks|key|1498303|text|我认为一个更好的解决方案是将disabled+data属性设置为on，并在单击时锚定检查。这样，我们可以暂时禁用锚点，直到javascript完成ajax调用或某些计算。如果我们不禁用它，那么我们可以快速单击它几次，这是不可取的……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1498304|$('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;
});|code-block|syntax|javascript|1498305|我制作了一个jsfiddle示例：http://jsfiddle.net/wgZ59/76/|offset|length|1498306|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/wgZ59/76/^0|0|0|H|T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I think a nicer solution is to set disabled data attribute on and anchor an check for it on click. This way we can disable temporarily an anchor until e.g. the javascript is finished with ajax call or some calculations. If we do not disable it, then we can quickly click it a few times, which is undesirable...

<pre><code>$('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;
});
</code></pre>

I made a jsfiddle example: <a href="http://jsfiddle.net/wgZ59/76/">http://jsfiddle.net/wgZ59/76/</a>

blocks|key|1498355|text|试试下面的几行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1498356|$("#yourbuttonid").attr("disabled",+"disabled");
$("#yourbuttonid").removeAttr("href");|code-block|syntax|javascript|1498357|因为，即使您禁用了<a>+tag，href也会工作，因此您还必须删除href。|offset|length|style|CODE|1498358|当您想启用时，请尝试以下几行|1498359|$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href",+"#nav-panel");|1498360|entityMap^0|0|0|9|3|H|4|Y|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

Try the below lines 

<pre><code>$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");
</code></pre>

Coz, Even if you disable <code>&lt;a&gt;</code> tag <code>href</code> will work so you must remove <code>href</code> also.

When you want enable try below lines

<pre><code>$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
</code></pre>

blocks|key|1498411|text|$('#divID').addClass('disabledAnchor');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1498412|在css文件中|unstyled|1498413|.disabledAnchor+a{
+++++++pointer-events:+none+!important;
+++++++cursor:+default;
+++++++color:white;
}|1498414|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$('#divID').addClass('disabledAnchor');
</code></pre>

In css file

<pre><code>.disabledAnchor a{
 pointer-events: none !important;
 cursor: default;
 color:white;
}
</code></pre>

blocks|key|1283356|text|它就像return+false一样简单；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1283357|例如。|1283358|jQuery("li+a:eq(0)").click(function(){
+++return+false;
})|code-block|syntax|javascript|1283359|或|1283360|jQuery("#menu+a").click(function(){
+++return+false;
})|1283361|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

It's as simple as return false;

ex.

<pre><code>jQuery("li a:eq(0)").click(function(){
 return false;
})
</code></pre>

or

<pre><code>jQuery("#menu a").click(function(){
 return false;
})
</code></pre>

blocks|key|1498252|text|$("a").click(function(event)+{
++event.preventDefault();
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1498253|如果调用此方法，则不会触发事件的默认操作。|unstyled|1498254|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$("a").click(function(event) {
 event.preventDefault();
});
</code></pre>

If this method is called, the default action of the event will not be triggered.

blocks|key|1497968|text|如果您试图阻止与页面的所有交互，则可能需要查看jQuery+BlockUI+Plugin|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1497969|entityMap|0|LINK|mutability|MUTABLE|url|http://malsup.com/jquery/block/^0|N|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you are trying to block all interaction with the page you might want to look at the <a href="http://malsup.com/jquery/block/" rel="nofollow noreferrer">jQuery BlockUI Plugin</a>

blocks|key|1498028|text|您从未真正指定过您希望如何禁用它们，或者什么会导致禁用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1498029|首先，您需要弄清楚如何将值设置为disabled，为此，您将使用JQuery's+Attribute+Functions，并在event上执行该函数，比如click或文档的loading。|offset|length|1498030|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Attributes|1|http://docs.jquery.com/Events|2|http://docs.jquery.com/Events/click#fn|3|http://docs.jquery.com/Events/ready#fn^0|0|W|S|0|1R|5|1|25|5|2|2E|7|3|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]|$D|Y|E|Z|1|10]|$D|11|E|12|1|13]|$D|14|E|15|1|16]]|A|$]]|$1|F|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]|N|$5|I|J|K|A|$L|O]]|P|$5|I|J|K|A|$L|Q]]|R|$5|I|J|K|A|$L|S]]]]

You never really specified how you wanted them disabled, or what would cause the disabling.

First, you want to figure out how to set the value to disabled, for that you would use <a href="http://docs.jquery.com/Attributes" rel="nofollow noreferrer">JQuery's Attribute Functions</a>, and have that function happen on an <a href="http://docs.jquery.com/Events" rel="nofollow noreferrer">event</a>, like a <a href="http://docs.jquery.com/Events/click#fn" rel="nofollow noreferrer">click</a>, or the <a href="http://docs.jquery.com/Events/ready#fn" rel="nofollow noreferrer">loading</a> of the document.

blocks|key|1283613|text|因此，结合上面的回答，我得出了以下结论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1283614|a.disabled+{+color:+#555555;+cursor:+default;+text-decoration:+none;+}

$(".yourClass").addClass("disabled").click(function(e){+e.preventDefault();+|code-block|syntax|javascript|1283615|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

So with a combination of the responses above, I came up with this.

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

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 
</code></pre>

blocks|key|1498397|text|如果你不需要它作为一个锚标签，那么我更喜欢替换它。例如，如果您的锚定标记类似于|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1498398|<a+class="MyLink"+href="http://www.google.com">My+Link</a>|code-block|syntax|javascript|1498399|然后，当您需要显示文本而不是链接时，可以使用jquery执行此操作。|1498400|var+content+=+$(".MyLink").text();+//+or+.html()
$(".MyLink").replaceWith("<div>"+%2B+content+%2B+"</div>")|1498401|这样，我们就可以简单地将锚标签替换为div标签。这要简单得多(只有2行)，而且语义上也是正确的(因为我们现在不需要链接，所以不应该有链接)|1498402|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you don't need it to behave as an anchor tag then I would prefer to replace it at all. For example
if your anchor tag is like 

<pre><code>&lt;a class="MyLink" href="http://www.google.com"&gt;&lt;span&gt;My&lt;/span&gt; &lt;strong&gt;Link&lt;/strong&gt;&lt;/a&gt;
</code></pre>

then using jquery you can do this when you need to display text instead of a link.

<pre><code>var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("&lt;div&gt;" + content + "&lt;/div&gt;")
</code></pre>

So this way, we can simply replace anchor tag with a div tag. This is much easier (just 2 lines) and semantically correct as well (because we don't need a link now therefore should not have a link)

blocks|key|1498467|text|禁用或启用任何具有disabled属性的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1498468|//+Disable+
$("#myAnchor").prop(+"disabled",+true+);

//+Enable
$(+"#myAnchor"+).prop(+"disabled",+false+);|code-block|syntax|javascript|1498469|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Disable or Enable any element with the disabled property.

<pre><code>// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );
</code></pre>

问如何使用jQuery启用或禁用锚点？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery启用或禁用锚点？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery启用或禁用锚点？
EN