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

【问题标题】：How to enable a button when radio button from all the sets are selected?选择所有集合中的单选按钮时如何启用按钮？
【发布时间】：2021-06-30 10:07:28
【问题描述】：

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

如何制作一个仅在检查所有字段时才启用按钮的 .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);

【问题讨论】：

您的代码似乎会在选择 2 台收音机后尝试启用该按钮，但您的标题显示所有问题。那么您能否准确告诉我们您期望的行为是什么
我不小心掉进了2号。我正在寻找所有要选择的问题，而不是启用按钮。

标签： javascript html onchange

【解决方案1】：

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

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

问题没有指定id的节点。
提交按钮有多个 id。这是不可能的。
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>

【讨论】：

这看起来很有希望，感谢您的帮助。不幸的是，它对我不起作用。即使我选中了表单上的所有框，该按钮也无法启用
最初选择了选定2个无线电困境时启用了按钮。我已将其更新为 3。希望这对您有用。

【解决方案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;

【讨论】：