javascript - 使用 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。我有两种不同的解决方案。我已经尝试过这两种方法，但我怀疑 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

这只是一个小错误，使用 document.getElementById 代替 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>