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

Question

I'm building a web form and I currently have five 'drop-down' menus (using the select tag) that allow users to choose a value from 0-5. It looks like this:

              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>

Is there anything I can do to disable a certain number from being chosen again if it is chosen on a select menu in other menus? Meaning, if I select 1 on the first drop-down menu I come across, I wouldn't be able to select it again on the others.

A potential solution I was considering was making a table of radio buttons. When a user selects a number, it disables that whole row of numbers. However I'm not really sure if I could do this in HTML. I think I'd need to use JS/JQuery.

One of the issues here is that 0 should be able to be selected multiple times, but a column needs to be disabled after a value for that column has been selected. The 0 field could be checkboxes, but then the style wouldn't be the same as the radio buttons.

Answer 1

Use same name for radio buttons in one cloumn.

For example

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

Update

$("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>

</div>