<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="fname">Fname:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Lname:</label>
<input type="text" id="lname" name="lname" disabled><br><br>
<input type="submit" value="Submit">
</form>
<script>
const fname = document.querySelector(".fname");
const lname = document.querySelector(".lname");
lname.readonly = true;
fname.addEventListener("keyup", () => {
if(fname.value.length >0)
{
lname.readonly = false;
}else
{
lname.readonly = true;
}
})
</script>
</body>
</html>
I want to temporarily disable lname textbox because the fname is empty, but if the fname is not empty the lname is enable. I have a code but I don’t think it is correct or wrong, you can visit my code here https://jsfiddle.net/Jayme207/ejks5xqL/12/