blocks|key|992156|text|删除href属性显然是可行的方法。如果以后出于某种原因需要它，我会将它存储在另一个属性中，例如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|992157|$(".my-link").each(function()+{
++++$(this).attr("data-oldhref",+$(this).attr("href"));
++++$(this).removeAttr("href");
});|code-block|syntax|javascript|992158|这是唯一的方法，这将使链接显示为禁用，以及不编写自定义CSS。只需将click处理程序绑定到false将使链接看起来像一个普通链接，但当单击它时不会发生任何事情，这可能会让用户感到困惑。如果您打算使用单击处理程序，我至少也会使用.addClass("link-disabled")并编写一些CSS，使该类的链接看起来像普通文本一样。|992159|entityMap^0|2|4|0|0|36|Q|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Removing the <code>href</code> attribute definitely seems to the way to go. If for some reason you need it later, I would just store it in another attribute, e.g.

<pre><code>$(".my-link").each(function() {
 $(this).attr("data-oldhref", $(this).attr("href"));
 $(this).removeAttr("href");
});
</code></pre>

This is the only way to do it that will make the link appear disabled as well without writing custom CSS. Just binding a click handler to false will make the link appear like a normal link, but nothing will happen when clicking on it, which may be confusing to users. If you are going to go the click handler route, I would at least also <code>.addClass("link-disabled")</code> and write some CSS that makes links with that class appear like normal text.

blocks|key|992218|text|$('.my-link').click(function(e)+{+e.preventDefault();+});+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|992219|您可以使用：|unstyled|992220|$('.my-link').click(function(e)+{+return+false;+});+|992221|但我自己并不喜欢使用它，因为它更隐蔽，尽管它在许多jQuery代码中都被广泛使用。|992222|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>$('.my-link').click(function(e) { e.preventDefault(); }); 
</code></pre>

You could use:

<pre><code>$('.my-link').click(function(e) { return false; }); 
</code></pre>

But I don't like to use this myself as it is more cryptic, even though it is used extensively throughout much jQuery code.

blocks|key|777963|text|我相信并不是所有的disabled元素都是有效的，请看MSDN+article。这一点和disabled的正确值只是"disabled“。最好的方法是绑定一个返回false的click函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|777964|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/ms533732%2528v=vs.85%2529.aspx^0|9|8|R|C|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

The <code>disabled</code> attribute isn't valid on all HTML elements I believe, see the <a href="http://msdn.microsoft.com/en-us/library/ms533732%28v=vs.85%29.aspx" rel="nofollow">MSDN article</a>. That and the proper value for disabled is simply "disabled". Your best approach is to bind a click function that returns false.

blocks|key|778015|text|我知道这是一个古老的问题，但它似乎仍然没有得到解决。遵循我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|778016|只需添加此全局处理程序：|778017|$('a').click(function()
{
+++++return+($(this).attr('disabled'))+?+false+:+true;
});|code-block|syntax|javascript|778018|下面是一个快速演示：http://jsbin.com/akihik/3|offset|length|778019|您甚至可以添加一点css来为所有具有disabled属性的链接提供不同的样式。|778020|e.g|778021|a[disabled]
{
++++color:+grey;+
}|778022|无论如何，disabled属性似乎对a标记无效。如果您更喜欢遵循w3c规范，那么可以很容易地采用与html5兼容的data-disabled属性。在这种情况下，您必须修改前面的代码片段并使用$(this).data('disabled')。|style|CODE|778023|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/akihik/3^0|0|0|0|A|P|0|0|0|0|0|I|1|1L|D|2N|O|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@$K|18|L|19|1|1A]]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|1E|8|@$K|1F|L|1G|U|V]|$K|1H|L|1I|U|V]|$K|1J|L|1K|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

I know it's an old question but it seems unsolved still. Follows my solution...

Simply add this global handler:

<pre><code>$('a').click(function()
{
 return ($(this).attr('disabled')) ? false : true;
});
</code></pre>

Here's a quick demo: <a href="http://jsbin.com/akihik/3">http://jsbin.com/akihik/3</a>

you can even add a bit of css to give a different style to all the links with the disabled attribute.

e.g

<pre><code>a[disabled]
{
 color: grey; 
}
</code></pre>

Anyway it seems that the disabled attribute is not valid for <code>a</code> tags. If you prefer to follow the w3c specs you can easily adopt an html5 compliant <code>data-disabled</code> attribute. In this case you have to modify the previous snippet and use <code>$(this).data('disabled')</code>.

blocks|key|992434|text|当涉及到支持(caniuse.com)时，pointer-events+CSS属性有点欠缺，但它非常简洁：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|992435|.my-link+{+pointer-events:+none;+}+|code-block|syntax|javascript|992436|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/pointer-events^0|L|E|7|B|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

The <code>pointer-events</code> CSS property is a little lacking when it comes to support (<a href="http://caniuse.com/pointer-events">caniuse.com</a>), but it's very succinct:

<pre><code>.my-link { pointer-events: none; } 
</code></pre>

blocks|key|992453|text|function+EnableHyperLink(id)+{
++++++++$('#'+%2B+id).attr('onclick',+'Pagination("'+%2B+id+%2B+'")');//onclick+event+which+u+
++++++++$('#'+%2B+id).addClass('enable-link');
++++++++$('#'+%2B+id).removeClass('disable-link');
++++}

++++function+DisableHyperLink(id)+{
++++++++$('#'+%2B+id).addClass('disable-link');
++++++++$('#'+%2B+id).removeClass('enable-link');
++++++++$('#'+%2B+id).removeAttr('onclick');
++++}

.disable-link
{
++++text-decoration:+none+!important;
++++color:+black+!important;
++++cursor:+default;
}
.enable-link
{
++++text-decoration:+underline+!important;
++++color:+#075798+!important;
++++cursor:+pointer+!important;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|992454|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>function EnableHyperLink(id) {
 $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
 $('#' + id).addClass('enable-link');
 $('#' + id).removeClass('disable-link');
 }

 function DisableHyperLink(id) {
 $('#' + id).addClass('disable-link');
 $('#' + id).removeClass('enable-link');
 $('#' + id).removeAttr('onclick');
 }

.disable-link
{
 text-decoration: none !important;
 color: black !important;
 cursor: default;
}
.enable-link
{
 text-decoration: underline !important;
 color: #075798 !important;
 cursor: pointer !important;
}
</code></pre>

blocks|key|992500|text|这也很好用。简单、精简，并且不需要使用jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992501|<a+href="javascript:void(0)">Link</a>|code-block|syntax|javascript|992502|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|$]]

This also works well. Is simple, lite, and doesn't require jQuery to be used.

<pre><code>&lt;a href="javascript:void(0)"&gt;Link&lt;/a&gt;
</code></pre>

blocks|key|992515|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992516|$(this).prop(+"disabled",+true+);|code-block|syntax|javascript|992517|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|$]]

Try:

<pre><code>$(this).prop( "disabled", true );
</code></pre>

blocks|key|778224|text|追加一个包含pointer-events的类:无|type|unstyled|depth|inlineStyleRanges|entityRanges|data|778225|.active+a{+//css
text-decoration:+underline;
background-color:+#fff;
pointer-events:+none;}


$(this).addClass('active');|code-block|syntax|javascript|778226|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|$]]

Append a class containing pointer-events:non

<pre><code>.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');
</code></pre>

<pre><code>&lt;a href="gohere.aspx" class="my-link"&gt;Click me&lt;/a&gt;
</code></pre>

I did 

<pre><code>$('.my-link').attr('disabled', true);
</code></pre>

but it didn't work

Is there an easy way to disable the hyperlink using jquery? Remove href? I would rather not fiddle with href. So if I can do it w/o removing href, that would be great.

disable a hyperlink using jQuery

jQuery

<a href="gohere.aspx" class="my-link">Click me</a>我做到了$('.my-link').attr('disabled', true);但它并没有起作用有没有一种简单的方法可以使用jquery禁用超链接？是否删除href？我宁可不摆弄href。因此，如果我可以在不删除hre...

问使用jQuery禁用超链接
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery禁用超链接EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery禁用超链接
EN