disable-enable the hyperlinks by clicking on a button
Question
I want to make something similar to this: disable-enable a hyperlink by clicking on radio-buttons but I would like to apply this method on multiple links, so I have to use the class of the elements. Just changing the code using ".getElementsByClassName" doesn't work, and I don't understand why. Can you explain that to me? StackoverFlow answer for question
var link;
function disable_link() {
document.getElementsByClassName('testlink').disabled=true;
link = document.getElementsByClassName('testlink').href;
document.getElementsByClassName('testlink').removeAttribute('href');
}
function enable_link() {
document.getElementsByClassName('testlink').setAttribute("href",link);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" onchange="disable_link();" />
Disable</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" onchange="enable_link();" />
enable</label>
<br />
</p>
<a class="testlink" href="http://www.yahoo.com"> test </a>
<a class="testlink" href="http://www.yahoo.com"> test </a>
<a class="testlink" href="http://www.yahoo.com"> test </a>
<a class="testlink" href="http://www.yahoo.com"> test </a>
</form>
</body>
</html>
Even other methods are fine.
edit: Thanks to all of you for the answers.
3 answers
solution1
3 ACCPTED 2015-03-21 21:27:38
getElementsByClassName returns a HTMLCollection, so you will have to loop over it and handle each link individually.
In this case you no longer can use temporary variable to hold disabled link href . Simple solution would be to store removed href attribute in another attribute on the corresponding element.
It can look something like this:
function disable_link() {
var links = document.getElementsByClassName('testlink');
for (var i = 0; i < links.length; i++) {
links[i].setAttribute('data-href', links[i].getAttribute('href'));
links[i].removeAttribute('href');
}
}
function enable_link() {
var links = document.getElementsByClassName('testlink');
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("href", links[i].getAttribute('data-href'));
}
}
solution2
1 2015-03-21 21:27:35
Note s in the following quote:
The getElement s ByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.
Tip: You can use the length property of the NodeList object to determine the number of elements with a specified class name, then you can loop through all elements and extract the info you want.
[ http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp ]
solution3
0 2015-03-21 21:32:46
this line wont work because it doesn't make sense which href of testclass should be set in parameter:
link = document.getElementsByClassName('testlink').href;
Actually You dont need to remove href. instead of that you can make a not_active class and toggle this class on all links is testlink class. (workd in IE11+ and others)
.not-active {
pointer-events: none;
cursor: default;
}
jquery to toggle class (handles both enabling and disabling):
function disable_link(){
$(".testlink").toggleClass("not_active")
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.