only javascript: disable radio buttons in rows and columns

Question

I found a script in here to disable radio buttons.

I want to add another set of radio buttons (Radio3) and have added the process functions so if I click a radio button of the first column (Radio1) the corresponding buttons Radio2 and Radio3 are disabled.

This also works fine: when clicking any other button the other buttons in that row are disabled. However, if Radio1 in the first line is clicked (Radio2 and Radio3 in the first line are now disabled) and then Radio 2 is clicked in the second row, the first row buttons are enabled again (except for Radio2_1).

How can I manage to keep them disabled so it is not possible to have two checked radio buttons in one row?

I must use a kind of if condition when clearing the previously disabled buttons so it leaves out those buttons that are in a row with one still checked button - but I have no idea how to do this...

function process(rb) {

  //left column
  for (i = 0; i < document.getElementsByName("Radio2").length; i++) {
    document.getElementsByName("Radio2")[i].disabled = '';
  }
  document.getElementById(rb.id.replace('Radio1', 'Radio2')).disabled = 'disabled';


  for (i = 0; i < document.getElementsByName("Radio3").length; i++) {
    document.getElementsByName("Radio3")[i].disabled = '';
  }
  document.getElementById(rb.id.replace('Radio1', 'Radio3')).disabled = 'disabled';
}
//middle column
function process2(rb) {

  //clearing previos disabled
  for (i = 0; i < document.getElementsByName("Radio1").length; i++) {
    document.getElementsByName("Radio1")[i].disabled = '';
  }
  document.getElementById(rb.id.replace('Radio2', 'Radio1')).disabled = 'disabled';

  for (i = 0; i < document.getElementsByName("Radio3").length; i++) {
    document.getElementsByName("Radio3")[i].disabled = '';
  }
  document.getElementById(rb.id.replace('Radio2', 'Radio3')).disabled = 'disabled';
}

//right column
function process3(rb) {

  //clearing previos disabled
  for (i = 0; i < document.getElementsByName("Radio1").length; i++) {
    document.getElementsByName("Radio1")[i].disabled = '';
  }
  document.getElementById(rb.id.replace('Radio3', 'Radio1')).disabled = 'disabled';

  for (i = 0; i < document.getElementsByName("Radio2").length; i++) {
    document.getElementsByName("Radio2")[i].disabled = '';
  }
  document.getElementById(rb.id.replace('Radio3', 'Radio2')).disabled = 'disabled';
}

<table style="width: 50%;">
  <tr>
    <td>
      <input id="Radio1_1" type="radio" name="Radio1" onchange="process(this)" /><br />
      <input id="Radio1_2" type="radio" name="Radio1" onchange="process(this)" /><br />
      <input id="Radio1_3" type="radio" name="Radio1" onchange="process(this)" /><br />
      <input id="Radio1_4" type="radio" name="Radio1" onchange="process(this)" /><br />
      <input id="Radio1_5" type="radio" name="Radio1" onchange="process(this)" />
    </td>
    <td>
      <input id="Radio2_1" type="radio" name="Radio2" onchange="process2(this)" /><br />
      <input id="Radio2_2" type="radio" name="Radio2" onchange="process2(this)" /><br />
      <input id="Radio2_3" type="radio" name="Radio2" onchange="process2(this)" /><br />
      <input id="Radio2_4" type="radio" name="Radio2" onchange="process2(this)" /><br />
      <input id="Radio2_5" type="radio" name="Radio2" onchange="process2(this)" />
    </td>
    <td>
      <input id="Radio3_1" type="radio" name="Radio3" onchange="process3(this)" /><br />
      <input id="Radio3_2" type="radio" name="Radio3" onchange="process3(this)" /><br />
      <input id="Radio3_3" type="radio" name="Radio3" onchange="process3(this)" /><br />
      <input id="Radio3_4" type="radio" name="Radio3" onchange="process3(this)" /><br />
      <input id="Radio3_5" type="radio" name="Radio3" onchange="process3(this)" />
    </td>
  </tr>
</table>

Here the HTML Code with the table format:

document.getElementById("tb").addEventListener("change", function(e) {
  const tgt = e.target;
  const rads = [...tgt.closest("tr").querySelectorAll("[type=radio]")];
  const choiceIndicii = rads.map(rad => rad.checked ? rad.id.split("_")[1] : ""); // already taken
  rads.forEach(rad =>  rad.disabled = choiceIndicii.includes(rad.id.split("_")[1]));
})
<table>
    <tbody id='tb'>
        <tr>
            <td><input id='Radio1_1' type='radio' name='Radio1' value='21'/></td>
            <td><input id='Radio2_1' type='radio' name='Radio2' value='21'/></td>
            <td><input id='Radio3_1' type='radio' name='Radio3' value='21'/></td>
            <td> more Info </td>
        </tr> 
        <tr>
            <td><input id='Radio1_2' type='radio' name='Radio1' value='22'/></td>
            <td><input id='Radio2_2' type='radio' name='Radio2' value='22'/></td>
            <td><input id='Radio3_2' type='radio' name='Radio3' value='22'/></td>
            <td> more Info </td>
        </tr> 
        <tr>
            <td><input id='Radio1_3' type='radio' name='Radio1' value='23'/></td>
            <td><input id='Radio2_3' type='radio' name='Radio2' value='23'/></td>
            <td><input id='Radio3_3' type='radio' name='Radio3' value='23'/></td>
            <td> more Info </td>
        </tr>       
        <tr>
            <td><input id='Radio1_4' type='radio' name='Radio1' value='25'/></td>
            <td><input id='Radio2_4' type='radio' name='Radio2' value='25'/></td>
            <td><input id='Radio3_4' type='radio' name='Radio3' value='25'/></td>
            <td> more Info </td>
        </tr> 
        <tr>
            <td><input id='Radio1_5' type='radio' name='Radio1' value='33'/></td>
            <td><input id='Radio2_5' type='radio' name='Radio2' value='33'/></td>
            <td><input id='Radio3_5' type='radio' name='Radio3' value='33'/></td>
            <td> more Info </td>
        </tr> 
        <tr>
            <td><input id='Radio1_6' type='radio' name='Radio1' value='54'/></td>
            <td><input id='Radio2_6' type='radio' name='Radio2' value='54'/></td>
            <td><input id='Radio3_6' type='radio' name='Radio3' value='54'/></td>
            <td> more Info </td>
        </tr>       
    </tbody>
</table>

mplungjan mplungjan · Accepted Answer · 2020-10-12T14:05:47

Why not have selects and test the choice is not already taken?

document.getElementById("tb").addEventListener("change", function(e) {
  const tgt = e.target;
  const sels = [...tgt.closest("tr").querySelectorAll("select")];
  const choiceIndicii = sels.map(sel => sel.value === "" ? -1 : sel.value.split("_")[1]); // already taken
  sels.forEach(sel => [...sel.querySelectorAll("option")]
    .forEach(opt => opt.disabled = choiceIndicii.includes(opt.value.split("_")[1]))
  );  
})

<table style="width: 50%;">
  <tbody id="tb">
    <tr>
      <td>
        <select id="select_1" class="choice">
          <option value="">First choice</option>
          <option value="Choice1_1">Choice 1</option>
          <option value="Choice1_2">Choice 2</option>
          <option value="Choice1_3">Choice 3</option>
          <option value="Choice1_4">Choice 4</option>
          <option value="Choice1_5">Choice 5</option>
        </select>
      </td>
      <td>
        <select id="select_2" class="choice">
          <option value="">Second choice</option>
          <option value="Choice2_1">Choice 1</option>
          <option value="Choice2_2">Choice 2</option>
          <option value="Choice2_3">Choice 3</option>
          <option value="Choice2_4">Choice 4</option>
          <option value="Choice2_5">Choice 5</option>
        </select>
      </td>
      <td>
        <select id="select_3" class="choice">
          <option value="">Third choice</option>
          <option value="Choice3_1">Choice 1</option>
          <option value="Choice3_2">Choice 2</option>
          <option value="Choice3_3">Choice 3</option>
          <option value="Choice3_4">Choice 4</option>
          <option value="Choice3_5">Choice 5</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Trying the same with radios

document.getElementById("tb").addEventListener("change", function(e) {
  const tgt = e.target;
  const rads = [...tgt.closest("tr").querySelectorAll("[type=radio]")];
  const choiceIndicii = rads.map(rad => rad.checked ? rad.id.split("_")[1] : ""); // already taken
  rads.forEach(rad =>  rad.disabled = choiceIndicii.includes(rad.id.split("_")[1]));
})

<table style="width: 50%;">
  <tbody id="tb">
    <tr>
      <td>
        <input id="Radio1_1" type="radio" name="Radio1" /><br />
        <input id="Radio1_2" type="radio" name="Radio1" /><br />
        <input id="Radio1_3" type="radio" name="Radio1" /><br />
        <input id="Radio1_4" type="radio" name="Radio1" /><br />
        <input id="Radio1_5" type="radio" name="Radio1" />
      </td>
      <td>
        <input id="Radio2_1" type="radio" name="Radio2" /><br />
        <input id="Radio2_2" type="radio" name="Radio2" /><br />
        <input id="Radio2_3" type="radio" name="Radio2" /><br />
        <input id="Radio2_4" type="radio" name="Radio2" /><br />
        <input id="Radio2_5" type="radio" name="Radio2" />
      </td>
      <td>
        <input id="Radio3_1" type="radio" name="Radio3" /><br />
        <input id="Radio3_2" type="radio" name="Radio3" /><br />
        <input id="Radio3_3" type="radio" name="Radio3" /><br />
        <input id="Radio3_4" type="radio" name="Radio3" /><br />
        <input id="Radio3_5" type="radio" name="Radio3" />
      </td>
    </tr>
  </tbody>
</table>

only javascript: disable radio buttons in rows and columns

1 Answers