How do you make an anchor link non-clickable or disabled?
JqueryJquery Problem Overview
I have an anchor link that I want to disable once the user clicks on it. Or, remove the anchor tag from around the text, but definitely keep the text.
<a href='' id='ThisLink'>some text</a>
I can do this easily with a button by adding .attr("disabled", "disabled");
I successfully added the disabled property, but the link was still clickable.
I don't really care if the text is underlined or not.
Any clue?
When you click on the wrong musician, it should just add "Wrong" and then become unclickable.
When you click and you are correct, it should add "Awesome" and then disable all <a>
tags.
Jquery Solutions
Solution 1 - Jquery
The cleanest method would be to add a class with pointer-events:none when you want to disable a click. It would function like a normal label.
.disableClick{
pointer-events: none;
}
Solution 2 - Jquery
<a href='javascript:void(0);'>some text</a>
Solution 3 - Jquery
Use pointer-events CSS style. (as Jason MacDonald suggested)
See MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events. Its supported in most browsers.
Simple adding "disabled" attribute to anchor will do the job if you have global CSS rule like following:
a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}
Solution 4 - Jquery
I just realized what you were asking for(I hope). Here's an ugly solution
var preventClick = false;
$('#ThisLink').click(function(e) {
$(this)
.css('cursor', 'default')
.css('text-decoration', 'none')
if (!preventClick) {
$(this).html($(this).html() + ' lalala');
}
preventClick = true;
return false;
});
Solution 5 - Jquery
$('a').removeAttr('href')
or
$('a').click(function(){ return false})
It depends on situation
Solution 6 - Jquery
Bootstrap provide us with .disabled
class. Please use it.
But .disabled
class only works when the 'a' tag already has class 'btn'. It doesn' t work on any old 'a' tag. The btn
class may not be appropriate in some context as it has style connotations. Under the covers, the .disabled
class sets pointer-events
to none
, so you can make CSS to do the same thing as Saroj Aryal and Vitrilo have sugested. (Thank you, Les Nightingill for this advice).
Solution 7 - Jquery
Add a css
class:
.disable_a_href{
pointer-events: none;
}
Add this jquery
:
$("#ThisLink").addClass("disable_a_href");
Solution 8 - Jquery
Just remove the href
attribute from the anchor tag.
Solution 9 - Jquery
The best way is to prevent the default action. In the case of anchor tag, the default behavior is redirecting to href
specified address.
So following javascript works best in the situation:
$('#ThisLink').click(function(e)
{
e.preventDefault();
});
Solution 10 - Jquery
You could use the onclick event to disable the click action:
<a href='' id='ThisLink' onclick='return false'>some text</a>
Or you could just use something other than an <a>
tag.
Solution 11 - Jquery
Jason MacDonald comments worked for me, tested in Chrome, Mozila and IE.
Added gray color to show disable effect.
.disable_a_href{
pointer-events: none;
**color:#c0c0c0 !important;**
}
Jquery was selecting only first element in the anchor list, added meta character (*) to select and disable all element with id #ThisLink
.
$("#ThisLink*").addClass("disable_a_href");
Solution 12 - Jquery
Write this a single line of jQuery Code
$('.hyperlink').css('pointer-events','none');
if you want to write in css file
.hyperlink{
pointer-events: none;
}
Solution 13 - Jquery
Create following class in style sheet :
.ThisLink{
pointer-events: none;
cursor: default;
}
Add this class to you link dynamically as follow.
<a href='' id='elemID'>some text</a>
// or using jquery
<script>
$('#elemID').addClass('ThisLink');
</script>
Solution 14 - Jquery
This is the method I used to disable.Hope it helps.
$("#ThisLink").attr("href","javascript:;");
Solution 15 - Jquery
Try this:
$('a').contents().unwrap();
Solution 16 - Jquery
Simply in SASS:
.some_class{
// styles...
&.active {
pointer-events:none;
}
}
Solution 17 - Jquery
Never trust the browser because the user can change the page in any way without the server's knowledge.
If a link is to work only once, the first thing you need to do is make sure that server side the click is accepted only once (with an onetime token specified as querystring for example), because the URL present in the href attribute can be copied by the user and inserted in the navigation bar of the browser and runned multiple times.
On the javascript side, the safest thing you can do is completely replace the <a>
link with another tag, preserving the content:
/** Replace element, preserving attributes and moving descendant nodes from the previous one.
*
* @param {HTMLElement} element Element to be replaced changing tag.
* @param {String} new_tag New element tag.
* @return {HTMLElement} New created element.
*/
function rename_element_tag(element, new_tag) {
let new_block = document.createElement(new_tag);
for (let j = 0; j < element.attributes.length; ++j)
new_block.setAttribute(element.attributes[j].name, element.attributes[j].value);
$(new_block).insertAfter(element);
while (element.childNodes.length > 0)
new_block.appendChild(element.childNodes[0]);
$(element).remove();
return new_block;
}
This function replaces the passed element in place by "modifying" the tag, and preserves attributes and content by iterating all child nodes via vanilla javascript instead of jQuery to handle text nodes as well.
In your case you must skip the href
attribute.
Solution 18 - Jquery
$('#ThisLink').one('click',function(){
$(this).bind('click',function(){
return false;
});
});
This would be another way to do this, the handler with return false
, which will disable the link, will be added after one click.
Solution 19 - Jquery
The easyest way
In your html:
<a id="foo" disabled="true">xxxxx<a>
In your js:
$('#foo').attr("disabled", false);
If you use it as attribute works perfectly