Javascript - ドロップダウンに基づいて要素やテキストボックスを有効/無効にすることはできません。

code demo hereはthis questionから取られています。しかし、ドロップダウンから "Others"という値を選択すると、テキストボックスを有効にしたかったのです。Javascript - ドロップダウンに基づいて要素やテキストボックスを有効/無効にすることはできません。

これは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を加えた後、有効/無効の要素が突然動作しませんでした。何故ですか？ここで

出典

2017-03-24 MechaMetalHead

他のvalに対してotherTxtを無効にしていることに気づいただけです。 1つは真でなければならず、もう1つは正しくないはずですか？ – Christopher

を進めています。の後に「||」と表示されました。これはJSでは許可されません。

あなたの2番目の間違いは、 "otherTxt"フィールドが既に無効になっており、それを無効にしようとしています。そう、再び外部と分割フィールドをクリックしながら、その他のメニューを選択することができた場合は、テキストボックスがここで有効になります他の人を取得します

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

出典

2017-03-24 04:39:45

は、あなたがこの行に1つのミスを犯すコード

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

出典

2017-03-24 04:27:11

「 = 無効偽」の値を変更します。この問題はここでも解決されています。このような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>

出典

2017-03-24 05:00:47

これは役立ちます。

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

出典

2017-03-24 05:03:16

Javascript - ドロップダウンに基づいて要素やテキストボックスを有効/無効にすることはできません。

答えて

関連する問題