使用select标签进行选择后禁用选项？

Question

我正在建立一个网络表单，而且我目前有五个下拉列表＆＃39;菜单（使用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

在一个cloumn中为单选按钮使用相同的名称。

例如

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

Answer 2

与@Bilal提出的相似。我也为每列添加了一个data-col属性，我用它来禁用同一列中的其他单选按钮。可能有更好的方法来做到这一点，但这是我的头脑。 HTML

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

的JavaScript

var all = $('input[type="radio"]');
all.on('change' function(){
  var col =$(this).attr('data-col');
  $('[data-col="'+col+'"]').prop('disabled', true);
  $(this).prop('disabled',false);
});