Javascript - 单选按钮启用/禁用元素不正确 [英] Javascript - radio button enable/disable elements not right
问题描述
当我尝试运行代码并测试表单时，它看起来有点儿有趣。我不知道如何用文字解释，但这是 gif，它会显示问题。
它没有正确启用和禁用元素。看起来还挺有趣的。
我还希望元素在从数据库检索值时基于选中的单选按钮保持启用和禁用元素，但它没有工作要么
这是我的代码
< html>
< head>
< title>提交合同< / title>
< meta charset =UTF-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< script type =text / javascript>
function toggleAlert2（）{
toggleDisabled（document.getElementById（division））;
document.getElementById（extText）。disabled = false;
}
函数toggleDisabled（el）{
尝试{
el.disabled = el.disabled？假：真;如果（el.childNodes&&& el.childNodes.length> 0）{
for（var x）
catch（E）{
}
if = 0; x
函数toggleAlert（）{
document.getElementById（extText）。disabled = true;
}
< / script>
< / head>
< body>
< form method =postaction =enctype =multipart / form-data>
ID：50< br>
< input type =hiddenname =idvalue =50/>
< label for =client1>
< input type =radioname =client_typeid =client1value =Divisionchecked onclick =toggleAlert（）/>分部
< / label>
& nbsp& nbsp& nbsp& nbsp& nbsp& nbsp& nbsp& nbsp& nbsp& nbsp& ; & nbsp& nbsp
< label for =client2>
< input type =radioname =client_typeid =client2value =Externalonclick =toggleAlert2（）/>外部
< / label>
& nbsp
< input type =textid =extTextname =client_details2value =rrrrrr/>
< br>< br>
< div id =division>
分部：
< select name =client_details>
< option value =选择/>选择分区...< / option>
< option value =Distribution/>分配< / option>
< option value =Transmission/>传输< / option>
< option value =Generation/> Generation< / option>
< option value =Procument/> Procument< / option>
< option value =其他/>其他< / option>
< / select>
< br>< br>
其他：< input type =textname =client_details1value =rrrrrr/>
< br>
< / div>
< br>
< input type =submitname =submitvalue =Submit/>
< / form>
< / body>
我的代码？谢谢！
尝试使用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;
}
在函数中。
So i'm trying to make enable/disabled elements based on the checked radio button in the edit form.
When I try to run the code and test the form, it looks kinda funny. I don't know how to explain it in words but this is the gif that would show the problem. It didn't enabled and disabled the elements correctly. Looks kinda funny.
I also wanted the elements to stay enabled and disabled the elements based on the checked radio button when it retrieve the values from the database but it didn't work either
This is my code
<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>
What are the alternatives to fix my code? Thanks!
Try rewrite it without recursion, try-catch and setting disabled for specific div classes using querySelector(). https://jsfiddle.net/Lsre6mfL/
You can also fold
var divis_el = document.getElementById("division");
for (var i = 0; i < divis_el.children.length; i++) {
divis_el.children[i].disabled = true;
}
In function.
这篇关于Javascript - 单选按钮启用/禁用元素不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
