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>

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>

希望这会对你有所帮助。

使用带有javascript的单选按钮启用和禁用文本？

2 个答案: