使用 Javascript 启用和禁用输入字段

Enable and Disable input field using Javascript

本文关键字：输入 字段 Javascript 启用 使用      更新时间：2023-09-26

我写了一些简单的代码，可以在单击按钮时启用和禁用输入字段，但它没有响应。请帮帮我...!!

<html>
<head>
    <script type="text/javascript">
        function toggleEnable(el1, el2) {
            document.getElementByID(el1).disabled = true;
            document.getElementByID(el2).disabled = true;
        }
    </script>
</head>
<body>
    <form>
        <table>
            <tr>
                <td><input id="input1" class="myText" type="text" placeholder="Row 1" /></td>
                <td><input id="input2" class="myText" type="text" placeholder="Row 1" /></td>
                <td><button onclick="toggleEnable('input1','input2')"> Enable/Disable </button></td>
            </tr>
            <tr>
                <td><input id="input3" class="myText" type="text" placeholder="Row 3" /></td>
                <td><input id="input4" class="myText" type="text" placeholder="Row 4" /></td>
                <td><button onclick="toggleEnable('input3','input4')"> Enable/Disable </button></td>
            </tr>
        </table>
    </form>
</body>
</html>

您的按钮正在提交表单，要不提交表单，您必须使用type="button"按钮，您也拼写错误getElementByID其getElementById 

<form>
    <table>
        <tr>
            <td><input id="input1" class="myText" type="text" placeholder="Row 1" /></td>
            <td><input id="input2" class="myText" type="text" placeholder="Row 1" /></td>
            <td><button type="button" onclick="toggleEnable('input1','input2')"> Enable/Disable </button></td>
        </tr>
        <tr>
            <td><input id="input3" class="myText" type="text" placeholder="Row 3" /></td>
            <td><input id="input4" class="myText" type="text" placeholder="Row 4" /></td>
            <td><button type="button" onclick="toggleEnable('input3','input4')"> Enable/Disable </button></td>
        </tr>
    </table>
</form>

    function toggleEnable(el1, el2) {
        document.getElementById(el1).disabled = true;
        document.getElementById(el2).disabled = true;
    }

http://jsfiddle.net/mowglisanu/aam7jg9t/

function toggleEnable(id) {
   var textbox = document.getElementById(id);
   
   if (textbox.disabled) {
      // If disabled, do this 
       document.getElementById(id).disabled = false;
    } else {
       // Enter code here
        document.getElementById(id).disabled = true;
     }
}
<form>
    <table>
        <tr>
            <td><input id="input1" class="myText" type="text" placeholder="Row 1" /></td>
            <td><button type="button" onclick="toggleEnable('input1')"> Enable/Disable </button></td>
        </tr>
        <tr>
            <td><input id="input2" class="myText" type="text" placeholder="Row 2" /></td>
            <td><button type="button" onclick="toggleEnable('input2')"> Enable/Disable </button></td>
        </tr>
    </table>
</form>

 function toggleEnable(el1, el2) {
   var textbox = document.getElementById(el1, el2);
   
   if (textbox.disabled) {
      // If disabled, do this 
       document.getElementById(el1).disabled = false;
        document.getElementById(el2).disabled = false;
    } else {
       // Enter code here
        document.getElementById(el1).disabled = true;
        document.getElementById(el2).disabled = true;
     }
}
 <form>
    <table>
        <tr>
            <td><input id="input1" class="myText" type="text" placeholder="Row 1" /></td>
            <td><input id="input2" class="myText" type="text" placeholder="Row 2" /></td>
            <td><button type="button" onclick="toggleEnable('input1','input2')"> Enable/Disable </button></td>
        </tr>
        <tr>
            <td><input id="input3" class="myText" type="text" placeholder="Row 3" /></td>
            <td><input id="input4" class="myText" type="text" placeholder="Row 4" /></td>
            <td><button type="button" onclick="toggleEnable('input3','input4')"> Enable/Disable </button></td>
        </tr>
    </table>
</form>

相关文章：