HTML form radio conditional-CodePudding

¡Hello! I need to make this range start working when the check is pressed ¿Can I get some help? Thanks

<!DOCTYPE html>
<html>
<body>


<input type="checkbox" id="si" name="nivel" onclick="myFunction()"><label for="si">Si</label> 

<input type="range"id="tickmarks" disabled="disabled" />
<datalist id="tickmarks">
<option value="bajo" label="Bajo"></option>
<option value="medio" label="Medio"></option>
<option value="alto" label="Alto"></option>
</datalist>

<script>
function myFunction() {
  var nivel = document.getElementById("si");
  var tickmarks = document.getElementById("tickmarks");
  if (nivel.checked == true){
    tickmarks.style.display = "block";
  } else {
     tickmarks.style.display = "none";
  }
}
</script>

</body>
</html>

I tried to press the checkbox to make the range appear and it could be selected but when it appears it is disabled.

CodePudding user response：

You can control whether an element is disabled by setting the element's disabled attribute to true/false.

<input type="checkbox" id="si" name="nivel" onclick="myFunction()">
<input type="range" id="tickmarks" disabled>

function myFunction() {
    const nivel = document.getElementById("si");
    const tickmarks = document.getElementById("tickmarks");
    if (nivel.checked == true) {
        tickmarks.disabled = false;
    } else {
        tickmarks.disabled = true;
    }
}