[英]Javascript - radio button enable/disable elements not right
因此,我试图基于编辑表单中选中的单选按钮来使能/禁用元素。
当我尝试运行代码并测试表单时,看起来有点可笑。 我不知道如何用语言解释它,但这是显示问题的GIF。 它没有正确启用和禁用元素。 看起来有点可笑。
我还希望元素保持启用状态,并在从数据库中检索值时基于选中的单选按钮禁用元素,但是它也不起作用
这是我的代码
<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>
                                     
<label for ="client2">
<input type="radio" name="client_type" id = "client2" value="External" onclick="toggleAlert2()"/> External
</label>
 
<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>
有什么方法可以修复我的代码? 谢谢!
尝试重写它而不进行递归,使用querySelector()禁用特定div类的try-catch和设置。 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;
}
在功能上。
哇,看起来有多简单。
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>                                       <label for ="client2"> <input type="radio" name="client_type" id = "client2" value="External" onchange="toggleAlert2()"/> External </label>   <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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.