选择所有集合中的单选按钮时如何启用按钮？

Question

我正在做一个测试并遇到了一个问题。

如何制作仅在选中所有字段时启用按钮的 .js 脚本。

<tr>
    <td class="first-col">Ritkán szorongom1
        <td><input type="radio" name="q1" value="1" id="q1"></td>
        <td><input type="radio" name="q1" value="2" id="q1"></td>
        <td><input type="radio" name="q1" value="3" id="q1"></td>
        <td><input type="radio" name="q1" value="4" id="q1"></td>
        <td><input type="radio" name="q1" value="5" id="q1"></td>
    </td>
</tr>
<tr>
    <td class="first-col">Ritkán szorongom1
        <td><input type="radio" name="q2" value="1" id="q2"></td>
        <td><input type="radio" name="q2" value="2" id="q2"></td>
        <td><input type="radio" name="q2" value="3" id="q2"></td>
        <td><input type="radio" name="q2" value="4" id="q2"></td>
        <td><input type="radio" name="q2" value="5" id="q2"></td>
    </td>
</tr>
<tr>
    <td class="first-col">Ritkán szorongom1
        <td><input type="radio" name="q3" value="1" id="q3"></td>
        <td><input type="radio" name="q3" value="2" id="q3"></td>
        <td><input type="radio" name="q3" value="3" id="q3"></td>
        <td><input type="radio" name="q3" value="4" id="q3"></td>
        <td><input type="radio" name="q3" value="5" id="q3"></td>
    </td>
</tr>

<div class="register-button">
    <input type="submit" name="submit1" class="inputButton" id="submit1" value="Következő" disabled id="enable-on-two" />
</div>

我在网上找到了这个 .js，但我不能很好地适应它，因为我有多页具有不同输入名称的测试题。

function numberOfCheckboxesSelected() {
    return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}

function onChange() {
    document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}

document.getElementById('world').addEventListener('change', onChange, false);

Answer 1

您的代码库存在一些问题。

1. document.getElementById('world').addEventListener('change', onChange, false);

   问题没有具有该指定 ID 的节点。

2. 提交按钮有多个 ID。 这是不可能的。

3. document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked')

您的输入类型是radio因此上述输入类型不起作用。 name 属性也是错误的。

我已经添加了这些修复。

 function numberOfCheckboxesSelected() { return document.querySelectorAll('input[type=radio]:checked').length; } function onChange() { console.log(numberOfCheckboxesSelected()); document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3; } document.querySelectorAll('input[type=radio]').forEach(node => { node.addEventListener('change', onChange, false); });

 <table> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q1" value="1" id="q1"></td> <td><input type="radio" name="q1" value="2" id="q1"></td> <td><input type="radio" name="q1" value="3" id="q1"></td> <td><input type="radio" name="q1" value="4" id="q1"></td> <td><input type="radio" name="q1" value="5" id="q1"></td> </td> </tr> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q2" value="1" id="q2"></td> <td><input type="radio" name="q2" value="2" id="q2"></td> <td><input type="radio" name="q2" value="3" id="q2"></td> <td><input type="radio" name="q2" value="4" id="q2"></td> <td><input type="radio" name="q2" value="5" id="q2"></td> </td> </tr> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q3" value="1" id="q3"></td> <td><input type="radio" name="q3" value="2" id="q3"></td> <td><input type="radio" name="q3" value="3" id="q3"></td> <td><input type="radio" name="q3" value="4" id="q3"></td> <td><input type="radio" name="q3" value="5" id="q3"></td> </td> </tr> </table> <div class="register-button"> <input type="submit" name="submit1" class="inputButton" value="Következő" disabled id="enable-on-two" /> </div>

Answer 2

上述解决方案需要稍加修正，因为它启用了两个输入选择上的提交按钮，而不是所有三个。

替换以下内容：

document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;

这样：

let totalInputs = document.querySelectorAll('input[type=radio]').length;
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() <   totalInputs;