堆栈内存溢出
  繁体   English   中英

Javascript-基于下拉菜单启用/禁用元素和文本框不起作用

[英]Javascript - enable/disable elements and text box based on drop down not working

 原文  2017-03-24 04:18:08  1   4    javascript/ html

问题描述

此处的代码演示摘自该问题 。 但是，当从下拉列表中选择值“其他”时，我想启用文本框。

这是我从jsfiddle中编辑的代码。 

<html>
<head>
<title> Submit a Contract </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function toggleExternal() {
    document.getElementById("extText").disabled = false;

    var divis_el = document.getElementById("division");
    for (var i = 0; i < divis_el.children.length; i++) {
        divis_el.children[i].disabled = true;
    }
}
function toggleDivision() {
    document.getElementById("extText").disabled = true;z
    var divis_el = document.getElementById("division");
    for (var i = 0; i < divis_el.children.length; i++) {
        divis_el.children[i].disabled = false;
    }
}

function enableTextbox() {
var val = document.getElementById("mySelect").selectedIndex;
if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4 ||) { document.getElementById("otherTxt").disabled = true}
if (val == 5) { document.getElementById("otherTxt").disabled = true; }
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
    ID:<br>
    <input type="hidden" name="id" value="50" />

    <label for = "client1">
    <input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
    </label>
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
    <label for ="client2">
    <input type="radio" name="client_type" id = "client2" value="External"  onclick="toggleExternal()"/> External
    </label>
    &nbsp 
    <input disabled type="text" id="extText" name="client_details2" value=""/> 
    <br><br>

    <div id="division">
    Division:
    <select id="mySelect" name="client_details" onchange="enableTextbox()">
        <option value="Choose">Choose Division...</option>
        <option value="Distribution">Distribution</option>
        <option value="Transmission">Transmission</option>
        <option value="Generation">Generation</option>
        <option value="Procument">Procument</option>
        <option value="Other">Others</option>
    </select>   
    <br><br>
    Others:<input type="text" id="otherTxt" name="client_details1" value="" disabled/>
    <br>
    </div>
    <br>
    <input type="submit" name="submit" value="Submit"/>
</form>     
</body>

我添加了功能enableTextBox，然后禁用/启用的元素突然不起作用。 这是为什么？

4 个解决方案

解决方案1
 1  2017-03-24 04:27:11

这是工作代码 

    <html>
<head>
<title> Submit a Contract </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
    ID:<br>
    <input type="hidden" name="id" value="50" />

    <label for = "client1">
    <input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
    </label>
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
    <label for ="client2">
    <input type="radio" name="client_type" id = "client2" value="External"  onclick="toggleExternal()"/> External
    </label>
    &nbsp 
    <input disabled type="text" id="extText" name="client_details2" value=""/> 
    <br><br>

    <div id="division">
    Division:
    <select id="mySelect" name="client_details" onchange="enableTextbox()">
        <option value="Choose">Choose Division...</option>
        <option value="Distribution">Distribution</option>
        <option value="Transmission">Transmission</option>
        <option value="Generation">Generation</option>
        <option value="Procument">Procument</option>
        <option value="Other">Others</option>
    </select>   
    <br><br>
    Others:<input type="text" id="otherTxt" name="client_details1" value="" disabled/>
    <br>
    </div>
    <br>
    <input type="submit" name="submit" value="Submit"/>
</form>  
<script>
    function toggleExternal() {
        document.getElementById("extText").disabled = false;

        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = true;
        }
    }
    function toggleDivision() {
        alert('a')
        document.getElementById("extText").disabled = true;
        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = false;
        }
    }

    function enableTextbox() {
    var val = document.getElementById("mySelect").selectedIndex;
    if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4) { document.getElementById("otherTxt").disabled = true}
    if (val == 5) { document.getElementById("otherTxt").disabled = false; }
    }
</script>   
</body>

解决方案2
 1 已采纳  2017-03-24 04:39:45

您在此行中犯了一个错误。 在val == 4您放置了“或”符号“ || ”，这在JS中是不允许的。

您的第二个错误是“ otherTxt ”字段已被禁用，您尝试禁用它。 因此更改值“ disable = false ” 

if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4) 
{
   document.getElementById("otherTxt").disabled = false
}

解决方案3
 1  2017-03-24 05:00:47

如果您可以在单击外部和再次划分字段的同时选择其他菜单，则将在此处启用其他文本框。 因此，此问题也已在此处解决。 改变这样的if条件。 检查问题并解决。 这将帮助您更好地为您服务，不会出现任何问题。 

   <html>
    <head>
    <title> Submit a Contract </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
    function toggleExternal() {
        document.getElementById("extText").disabled = false;

        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = true;
        }

    }
    function toggleDivision() {
        document.getElementById("extText").disabled = true; 
        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = false;
        }
        var val = document.getElementById("mySelect").selectedIndex;
    if (val != 5 ) { document.getElementById("otherTxt").disabled = false}else{document.getElementById("otherTxt").disabled = true; }

    }

    function enableTextbox() {
    var val = document.getElementById("mySelect").selectedIndex;
    if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4 && val != 5 ) { document.getElementById("otherTxt").disabled = false}else{document.getElementById("otherTxt").disabled = true; }

    }
    </script>
    </head>
    <body>
    <form method="post" action="" enctype="multipart/form-data">
        ID:<br>
        <input type="hidden" name="id" value="50" />

        <label for = "client1">
        <input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
        </label>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
        <label for ="client2">
        <input type="radio" name="client_type" id = "client2" value="External"  onclick="toggleExternal()"/> External
        </label>
        &nbsp 
        <input disabled type="text" id="extText" name="client_details2" value=""/> 
        <br><br>

        <div id="division">
        Division:
        <select id="mySelect" name="client_details" onchange="enableTextbox()">
            <option value="Choose">Choose Division...</option>
            <option value="Distribution">Distribution</option>
            <option value="Transmission">Transmission</option>
            <option value="Generation">Generation</option>
            <option value="Procument">Procument</option>
            <option value="Other">Others</option>
        </select>   
        <br><br>
        Others:<input type="text" id="otherTxt" name="client_details1" value="" />
        <br>
        </div>
        <br>
        <input type="submit" name="submit" value="Submit"/>
    </form>     
    </body>

解决方案4
 1  2017-03-24 05:03:16

那对你有帮助。 

<html>
    <head>
    <title> Submit a Contract </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">

        function clientDetails(){

            console.log(document.getElementById("client_details").value);
            if(document.getElementById("client_details").value == "Other"){
        document.getElementById("client_details1").disabled = false;
      }else{
        document.getElementById("client_details1").disabled = true;
      }
    }

    function toggleExternal() {
        document.getElementById("extText").disabled = false;
        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = true;
        }
    }
    function toggleDivision() {
        document.getElementById("extText").disabled = true;
        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = false;
        }
}
</script>
</head>
<body>
    <form method="post" action="" enctype="multipart/form-data">
        ID: 50<br>
        <input type="hidden" name="id" value="50" />

        <label for = "client1">
        <input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
        </label>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
        <label for ="client2">
        <input type="radio" name="client_type" id = "client2" value="External"  onclick="toggleExternal()"/> External
        </label>
        &nbsp 
        <input disabled type="text" id="extText" name="client_details2" value="rrrrrr"/> 
        <br><br>

        <div id="division">
        Division:
        <select name="client_details" id="client_details" onchange="clientDetails()">
            <option value="Choose"  />Choose Division...</option>
            <option value="Distribution"  />Distribution</option>
            <option value="Transmission"  />Transmission</option>
            <option value="Generation"  />Generation</option>
            <option value="Procument"  />Procument</option>
            <option value="Other"  />Others</option>
        </select>   
        <br><br>
        Others:<input type="text" name="client_details1" value="rrrrrr" id="client_details1" disabled/>
        <br>
        </div>
        <br>
        <input type="submit" name="submit" value="Submit"/>
    </form>     
</body>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 HTML + Javascript/JQuery 中启用/禁用下拉列表框？ 如何在选择其他下拉列表中启用或禁用下拉列表或文本框？ 禁用/启用基于选择Javascript的无线电/选择选项的文本框 基于另一个下拉列表启用/禁用下拉列表 根据下拉菜单中的选定值启用/禁用表单中元素的最佳方法？ 如何使用原始 javascript 在下拉框中显示基于 div&gt;a 的子元素文本，如 select&gt;option 结构 基于同一表单中的下拉菜单的值启用HTML表单文本框？ 根据下拉选择填充文本框 在Javascript中从文本框中填充下拉菜单 根据下拉选择启用和禁用按钮。 -引导程序3
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM