javascript - 仅 javascript：禁用行和列中的单选按钮

Question

我在这里找到了一个脚本来禁用单选按钮。

我想添加另一组单选按钮 (Radio3) 并添加了处理功能，因此如果我单击第一列 (Radio1) 的单选按钮，相应的按钮 Radio2 和 Radio3 将被禁用。

这也可以正常工作：单击任何其他按钮时，该行中的其他按钮都被禁用。但是，如果单击第一行中的 Radio1（第一行中的 Radio2 和 Radio3 现在已禁用），然后单击第二行中的 Radio 2，则再次启用第一行按钮（Radio2_1 除外）。

我怎样才能设法使它们保持禁用状态，这样就不可能在一行中有两个选中的单选按钮？

在清除以前禁用的按钮时，我必须使用一种 if 条件，这样它就可以排除那些排成一行的按钮，其中一个仍然选中的按钮 - 但我不知道该怎么做......

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>

这里是表格格式的 HTML 代码：

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>    

标签： javascripthtml

Answer 1

为什么没有选择和测试选择不是已经采取的？

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>

用收音机尝试同样的方法

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>