javascript - 使用选择标签进行选择后禁用选择？

Question

我正在构建一个 Web 表单，我目前有五个“下拉”菜单(使用 select 标签)，允许用户从 0-5 中选择一个值。它看起来像这样:

              Choose one:
                    <select name="choose_one" required>
                        <option value=""></option>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>    
                    </select>

如果某个数字在其他菜单的选择菜单上被选中，我可以做些什么来禁止再次选择某个数字吗？也就是说，如果我在遇到的第一个下拉菜单中选择 1，我将无法在其他菜单中再次选择它。

我正在考虑的一个潜在解决方案是制作一个单选按钮表。当用户选择一个数字时，它会禁用整行数字。但是我不确定我是否可以在 HTML 中执行此操作。我想我需要使用 JS/JQuery。

这里的一个问题是 0 应该能够被多次选择，但是在选择该列的值之后需要禁用该列。 0 字段可以是复选框，但样式不会与单选按钮相同。

Answer 1

单选按钮在一列中使用相同的名称。

例如

<table>
  <tr>
    <td></td>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>0</td>
    <td><input type="radio" name="item1" value="0" /></td>
    <td><input type="radio" name="item2" value="0" /></td>
    <td><input type="radio" name="item3" value="0" /></td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="radio" name="item1" value="1" /></td>
    <td><input type="radio" name="item2" value="1" /></td>
    <td><input type="radio" name="item3" value="1" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td><input type="radio" name="item1" value="2" /></td>
    <td><input type="radio" name="item2" value="2" /></td>
    <td><input type="radio" name="item3" value="2" /></td>
  </tr>
</table>

更新

$("input[type=radio]").click(function() {
  var selectedValue = $(this).val() ;
  $("input[value="+selectedValue+"]").each(function(){
    if(!$(this).is(':checked')) {
      $(this).prop('disabled', true);
   }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tr>
        <td></td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
      </tr>
      <tr>
        <td>0</td>
        <td><input type="radio" name="item1" value="0" /></td>
        <td><input type="radio" name="item2" value="0" /></td>
        <td><input type="radio" name="item3" value="0" /></td>
      </tr>
      <tr>
        <td>1</td>
        <td><input type="radio" name="item1" value="1" /></td>
        <td><input type="radio" name="item2" value="1" /></td>
        <td><input type="radio" name="item3" value="1" /></td>
      </tr>
      <tr>
        <td>2</td>
        <td><input type="radio" name="item1" value="2" /></td>
        <td><input type="radio" name="item2" value="2" /></td>
        <td><input type="radio" name="item3" value="2" /></td>
      </tr>
    </table>