Enable and disable text with radio buttons with javascript?

Question

I have 4 different text boxes the first text box should be enable if the user chooses to enter the volume. The other 3 text boxes (length, width and depth) should be enabled when the user wants to enter dimension. So far this is what I've got.

    <form>
        <input type="radio" name="r" id="radio1" checked="checked" onclick="enableTxtBox1()">
        <input type="text" id="text1" disabled="disabled" placeholder="Volume m^3">
        <input type="radio" name="r" id="radio2" onclick="enableTxtBox1()">
        <input type="text" id="text2" disabled="disabled" placeholder="Lenght"> 
        <input type="text" id="text3" disabled="disabled" placeholder="Width">  
        <input type="text" id="text4" disabled="disabled" placeholder="Depth">  
    </form>

The following javascript where I try to enable and disable. I have two different solutions. I've tried both but I'm suspecting that the javascript is never called.

    
    /*
    function enableTxtBox1()
    {
            document.GetElementById("text1").disabled = !document.GetElementById("radio1").checked;

            document.GetElementById("text2").disabled = document.GetElementById("radio1").checked;
            document.GetElementById("text3").disabled = document.GetElementById("radio1").checked;
            document.GetElementById("text4").disabled = document.GetElementById("radio1").checked;

    }
    */
    function enableTxtBox()
    {
         if(document.GetElementById("radio1").checked)
         {
            document.GetElementById("text1").disabled = false;

            document.GetElementById("text2").disabled = true;
            document.GetElementById("text3").disabled = true;
            document.GetElementById("text4").disabled = true;

         }
         else if(document.GetElementById("radio2").checked)
         {
            document.GetElementById("text1").disabled = true;

            document.GetElementById("text2").disabled = false;
            document.GetElementById("text3").disabled = false;
            document.GetElementById("text4").disabled = false;

         }
    }

Answer 1

This is just a small mistake use document.getElementById place of document.GetElementById

<form>
        <input type="radio" name="r" id="radio1" checked="checked" onclick="enableTxtBox1()">
        <input type="text" id="text1" disabled="disabled" placeholder="Volume m^3">
        <input type="radio" name="r" id="radio2" onclick="enableTxtBox1()">
        <input type="text" id="text2" disabled="disabled" placeholder="Lenght"> 
        <input type="text" id="text3" disabled="disabled" placeholder="Width">  
        <input type="text" id="text4" disabled="disabled" placeholder="Depth">  
    </form>
    <script>
        function enableTxtBox1()
        {
            document.getElementById("text1").disabled = !document.getElementById("radio1").checked;

            document.getElementById("text2").disabled = document.getElementById("radio1").checked;
            document.getElementById("text3").disabled = document.getElementById("radio1").checked;
            document.getElementById("text4").disabled = document.getElementById("radio1").checked;

        }

        function enableTxtBox()
        {
            if (document.getElementById("radio1").checked)
            {
                document.getElementById("text1").disabled = false;

                document.getElementById("text2").disabled = true;
                document.getElementById("text3").disabled = true;
                document.getElementById("text4").disabled = true;

            }
            else if (document.getElementById("radio2").checked)
            {
                document.getElementById("text1").disabled = true;

                document.getElementById("text2").disabled = false;
                document.getElementById("text3").disabled = false;
                document.getElementById("text4").disabled = false;

            }
        }
    </script>

Answer 2

try this

  <form>
    <input type="radio" name="r" id="radio1" >
    <input type="text" id="text1" disabled="disabled" placeholder="Volume m^3">
    <input type="radio" name="r" id="radio2" >
    <input type="text" id="text2" disabled="disabled" placeholder="Lenght"> 
    <input type="text" id="text3" disabled="disabled" placeholder="Width">  
    <input type="text" id="text4" disabled="disabled" placeholder="Depth">  
</form>



<script>
document.getElementById("radio1").onclick = function() {myFunction1()};

function myFunction1() {
    if(document.getElementById("radio1").checked == true)
    {
        document.getElementById("text1").disabled = true;
        document.getElementById("text2").disabled = false;
        document.getElementById("text3").disabled = false;
        document.getElementById("text4").disabled = false;
     }
     else
      {
        document.getElementById("text1").disabled = false;
        document.getElementById("text2").disabled = true;
        document.getElementById("text3").disabled = true;
        document.getElementById("text4").disabled = true;
      }

}







document.getElementById("radio2").onclick = function() {myFunction2()};

function myFunction2() {
    if(document.getElementById("radio1").checked == false)
    {
        document.getElementById("text1").disabled = true;
        document.getElementById("text2").disabled = false;
        document.getElementById("text3").disabled = false;
        document.getElementById("text4").disabled = false;
     }
     else
      {
        document.getElementById("text1").disabled = false;
        document.getElementById("text2").disabled = true;
        document.getElementById("text3").disabled = true;
        document.getElementById("text4").disabled = true;
      }

}
</script>

Hope this will help you.