Search code examples
htmlformscheckboxconditional-statementsradio-button

HTML form radio conditional

¡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.

Solution

  • 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;
    }
}