JavaScriptを使用してラジオボタンでテキストを有効または無効にしますか？

Question

私は4つの異なるテキストボックスを持っています。最初のテキストボックスは、ユーザーがボリュームの入力を選択した場合に有効にする必要があります。他の3つのテキストボックス（長さ、幅、および深さ）は、ユーザーが寸法を入力したいときに有効にする必要があります。これまでのところ、これは私が持っているものです。

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

次のjavascriptでは、有効にしたり無効にしたりしようとしています。私は2つの異なるソリューションを持っています。私は両方を試みたが、私はjavascriptが呼び出されることはないと思っている。

    
    /* 
    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

これがお手伝いします。この

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

希望をしてみてください。