Question

所以我试图根据编辑表单中选中的单选按钮创建启用/禁用元素。

当我尝试运行代码并测试表单时，它看起来很有趣。我不知道如何用文字解释它，但这是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>

修复我的代码有哪些替代方法？谢谢！

Answer 1

尝试使用querySelector（）在不递归，try-catch和设置为特定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;
}

在功能上。

Answer 2

哇，看看它有多简单。

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>

Javascript - 单选按钮启用/禁用元素不对

2 个答案: