Question

我有一个问题，我做了这个演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Radio array looping</title>
</head>
<body>
    <form name="demoForm" method="post" action="whatever.php">
        <p>C-enabler:<input type="radio" name="en-disabler" value="someValue" onclick="enableCradios()"> &nbsp;
            C-disabler:<input type="radio" name="en-disabler" value="someOtherValue" onclick="disableCradios()">
        </p>
        <table>
            <tr>
                <td>Question B1a:</td>
                <td><input type="radio" name="B1a" value="0"></td>
                <td><input type="radio" name="B1a" value="2.5"></td>
                <td><input type="radio" name="B1a" value="5"></td>
                <td><input type="radio" name="B1a" value="7.5"></td>
                <td><input type="radio" name="B1a" value="10"></td>
            </tr>
            <tr>
                <td>Question B1b:</td>
                <td><input type="radio" name="B1b" value="0"></td>
                <td><input type="radio" name="B1b" value="2.5"></td>
                <td><input type="radio" name="B1b" value="5"></td>
                <td><input type="radio" name="B1b" value="7.5"></td>
                <td><input type="radio" name="B1b" value="10"></td>
            </tr>
            <tr>
                <td>Question C1a:</td>
                <td><input type="radio" name="C1a" value="0"></td>
                <td><input type="radio" name="C1a" value="2.5"></td>
                <td><input type="radio" name="C1a" value="5"></td>
                <td><input type="radio" name="C1a" value="7.5"></td>
                <td><input type="radio" name="C1a" value="10"></td>
            </tr>
            <tr>
                <td>Question C1b:</td>
                <td><input type="radio" name="C1b" value="0"></td>
                <td><input type="radio" name="C1b" value="2.5"></td>
                <td><input type="radio" name="C1b" value="5"></td>
                <td><input type="radio" name="C1b" value="7.5"></td>
                <td><input type="radio" name="C1b" value="10"></td>
            </tr>
        </table>
    </form>
    <script>
        function disableRadios(array) {
            for (var i=0; i<array.length; i++) {
                var eachRadio = array[i];
                eachRadio.disabled = true;
            }
        }

        function disableCradios() {
            var groupNamesArray = ['C1a','C1b'];
            for (var i=0; i<groupNamesArray.length; i++) {
                var perGroup = groupNamesArray[i];
                var workingArray = demoForm.elements[perGroup];
                for (var i=0; i<workingArray.length; i++) {
                    var eachCgroup = workingArray[i];
                    disableRadios(eachCgroup);
                    //eachCgroup.disabled = true;
                }
            }
        }
    </script>
</body>
</html>

另见JSFiddle。请注意，我必须将javascript放在HTML部分，否则小提琴手将无法播放。单击C-disabler应禁用两个C问题的单选按钮。它没有。取消eachCgroup.disabled = true;加上取消注释disableRadios(eachCgroup);会导致仅禁用第一个C问题的按钮。然后启用第二个C问题的按钮。

我已经使用了那个脚本方法，我称之为双数组方法，在验证中成功，可以看作here。奇迹般有效。但是，如果我使用相同的方法来禁用C部分，它不会，或只有一半。那为什么会这样？

Answer 1

var groupNamesArray = ['C1a','C1b'];
for (var i=0; i<groupNamesArray.length; i++) {
    var perGroup = groupNamesArray[i];
    var workingArray = demoForm.elements[perGroup];
    for (var i=0; i<workingArray.length; i++) {
        var eachCgroup = workingArray[i];
        disableRadios(eachCgroup);
        //eachCgroup.disabled = true;
    }
}

在两个嵌套for循环中使用相同的变量名称在这里是错误的...而且不是，那些不是两个名为i的不同的变量这里，因为JavaScript中的变量是hoisted。

你在这里使用一个“循环”。 demoForm.elements[perGroup]是 NodeList - 并且循环使您可以访问NodeList中的各个HTML元素（在这种情况下是特定名称的单选按钮） - 那些是您要设置disabled属性的内容，而是您试图在函数disableRadios中再次“循环”它们 - 仅“循环”一个个人单选按钮没有任何意义。

这就是你需要的一个功能：

function disableCradios() {
    var groupNamesArray = ['C1a','C1b'];
    for (var i=0; i<groupNamesArray.length; i++) {
        var radioButtonsInGroup = demoForm.elements[groupNamesArray[i]];
        for (var j=0; j<radioButtonsInGroup.length; j++) {
            radioButtonsInGroup[j].disabled = true;
        }
    }
}

http://jsfiddle.net/aXTBJ/2/

（我冒昧地在这里选择不同的变量名，以及删除“不必要的”变量。）

你可以很容易地弄清楚这两个问题，例如通过调整循环计数器变量的调试输出和用于通过console.log()访问HTML元素的变量 - 所以请在下次这样做，并自己训练如何进行这样的基本调试。

数组脚本方法验证单选按钮组，但不会禁用它们。为什么？

1 个答案: