How to disable hyperlink of anchor tag
How can to enable button as well as hyperlink of anchor tag when checkbox is checked and disable them when checkbox is unchecked. my button is checked/unchecked well but hyperlink is not.
<td>
<input type="checkbox" id="tick" onchange="document.getElementById('terms').disabled = !this.checked;" />
</td>
<td>
<p> I agree to the <a href="Lego blocks go2.html" target="_blank">Terms & Conditions</a></p>
</td>
<tr>
<td class="label1"></td>
<td align="right">
<button type="submit" class="btn btn1" name="terms" id="terms" disabled>Done</i></button>
</td>
</tr>
Solution 1:
There is no disabled attribute for anchor tag hyperlinks. You can do that using css property pointer-events: none.
Why use pointer-events: none?
-
pointer-events: noneprevents all click, state and cursor options on the specified HTML element.
Here down is modified code:
var chkBox = document.getElementById('tick');
var btnDone = document.getElementById('terms');
var chkbxToggle = (chkBox) => {
if(chkBox.checked){
btnDone.disabled = false;
link.classList.remove("disabled");
} else {
btnDone.disabled = true;
link.classList.add("disabled");
}
}.disabled {
pointer-events: none;
cursor: default;
color: #afafaf;
}<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td><input type="checkbox" id="tick" onchange="chkbxToggle(this)" /></td>
<td><p> I agree to the <a href="Lego blocks go2.html" class="disabled" id="link" target="_blank">Terms & Conditions</a></p></td>
</tr>
<tr>
<td class="label1"></td>
<td align="right"><button type="submit" class="btn btn1" name="terms" id="terms" disabled="disabled">Done</i></button></td>
</tr>
</table>
</body>
</html>