How to enable a button when radio button from all the sets are selected?

Question

I am working on a test and bumped into a problem.

How do I make a .js script that only enables button when all fields are checked.

<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>

I have found this .js online, but I can't make it fit well as I have multiple pages of test questions with different input names.

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

There were some issues with your codebase.

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

   Issue There is no node with that specified id.

2. Submit button has more than one id. That is not possible.

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

Your input type is radio so the above one wont work. Also the name attribute is wrong.

I have added those fixes.

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>