Javascript - 單選按鈕啓用/禁用元素不正確

所以我試圖根據編輯表單中選中的單選按鈕來啓用/禁用元素。Javascript - 單選按鈕啓用/禁用元素不正確

當我嘗試運行代碼並測試表單時，它看起來有點兒有趣。我不知道如何用文字解釋，但這是gif that would show the problem. 它沒有正確啓用和禁用元素。看起來很有趣。

我也想的元素來保持啓用和禁用基於檢查的單選按鈕時，從數據庫中檢索的數值的元素，但它沒有工作，要麼

這是我的代碼

<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 toggleAlert2() { 
    toggleDisabled(document.getElementById("division")); 
    document.getElementById("extText").disabled = false; 
} 
    function toggleDisabled(el) { 
    try { 
    el.disabled = el.disabled ? false : true; 
    } 
    catch(E){ 
    } 
    if (el.childNodes && el.childNodes.length > 0) { 
     for (var x = 0; x < el.childNodes.length; x++) { 
     toggleDisabled(el.childNodes[x]); 
     } 
    } 
} 
function toggleAlert() { 
    document.getElementById("extText").disabled = true; 

} 
</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="toggleAlert()"/> 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="toggleAlert2()"/> External 
     </label> 
     &nbsp 
     <input type="text" id="extText" name="client_details2" value="rrrrrr"/> 
     <br><br> 

     <div id="division"> 
     Division: 
     <select name="client_details"> 
      <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" /> 
     <br> 
     </div> 
     <br> 
     <input type="submit" name="submit" value="Submit"/> 
    </form>  
</body>

有什麼替代方案來修復我的代碼？謝謝！

來源

2017-03-23 MechaMetalHead

我覺得像GIF在喜劇表演，其中一個老人試圖做一些網站和奇怪的事情不斷髮生在所屬笑。 –

但主要的事情並沒有幫助你發佈你的PHP以及你的html代碼。你可以打開你的頁面，點擊右鍵，點擊「Page Source」並將HTML複製回來？獎勵積分使其成爲一個片段 –

對不起這個PHP的事情！是啊，GIF有點看起來很有趣！我會在一會兒發佈html – MechaMetalHead

嘗試使用querySelector（）不使用遞歸重寫它，嘗試捕獲並禁用特定div類。 https://jsfiddle.net/Lsre6mfL/

您也可以摺疊

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

在功能上。

來源

2017-03-23 05:21:48

它很好的謝謝！ – MechaMetalHead

哇，看起來有多簡單。

function toggleAlert2() { 
 
    document.getElementById("extText").disabled = false; 
 
    document.getElementById("client_details").disabled = true; 
 
    document.getElementById("client_details1").disabled = true; 
 
    
 
} 
 

 
function toggleAlert() { 
 
    document.getElementById("extText").disabled = true; 
 
    document.getElementById("client_details").disabled = false; 
 
    document.getElementById("client_details1").disabled = false; 
 
}

<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 onchange="toggleAlert()"/> 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" onchange="toggleAlert2()"/> External 
 
     </label> 
 
     &nbsp 
 
     <input type="text" id="extText" name="client_details2" value="rrrrrr"/> 
 
     <br><br> 
 

 
     <div id="division"> 
 
     Division: 
 
     <select id="client_details" name="client_details"> 
 
      <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 id="client_details1" type="text" name="client_details1" value="rrrrrr" /> 
 
     <br> 
 
     </div> 
 
     <br> 
 
     <input type="submit" name="submit" value="Submit"/> 
 
    </form>

來源

2017-03-23 06:04:28

我已經嘗試過，但它沒有工作，所以我會採取УнгамистДолматов的方法，因爲他/她給我的代碼工作。不管怎麼說，還是要謝謝你。 :) – MechaMetalHead

Javascript - 單選按鈕啓用/禁用元素不正確

回答

相關問題