How to disable href that is not clicked in loop?
Question
As the picture of template, when i click one of the link between number1 to number3 , i want to disable the other links that are not clicked, for instance, number2 were clicked then number1 and number2 will be disable by this style pointer-events: none; cursor: default; pointer-events: none; cursor: default; and when i click on restart link, every link will be able to click again.
This is my template code using flask as a web framework.
<!DOCTYPE html>
<html lang="en">
<body>
{% for number in range(5) %}
<a href="#"> number1 </a>
<a href="#"> number2 </a>
<a href="#"> number3 </a>
<a href="#"> restart </a>
<br>
{% endfor %}
</body>
</html>
1 answers
solution1
1 ACCPTED 2020-02-01 14:32:29
I grouped your links in the rows with the name attribute, is this what you're looking for mate? because you gave no sample of what you tried etc..
#Flask
{% for number in range(5) %}
<a href="#" name="{number}" onClick="disable(event,{number})"> number1 </a>
<a href="#" name="{number}" onClick="disable(event,{number})"> number2 </a>
<a href="#" name="{number}" onClick="disable(event,{number})"> number3 </a>
<a href="#" onClick="enable({number})"> restart </a>
<br>
{% endfor %}
#CSS
.disabled{
pointer-events: none;
cursor: default;
}
#JS
function disable(event,number){
event.preventDefault();
var el=document.getElementsByName(number);
for(i = 0;i<el.length;i++){
if (e[i] != event.target)
el[i].classList.add('disabled');
}
location.href = event.target.href;
}
function enable(number){
var el=document.getElementsByName(number)
for(i = 0;i<el.length;i++)
el[i].classList.remove('disabled');
}
Consider changing restart to a button(or ditching it per Orange's suggestion) and using Event listeners
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.