duadpnld426905
2014-09-17 16:42
浏览 368

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

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.

Test table!

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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dpxbc88022 2014-09-17 16:50
    已采纳

    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>
    
    点赞 打赏 评论
  • dsg41888 2014-09-17 17:04

    Similar to what @Bilal proposed. I added a data-col attribute for each column as well and I use this to disable the other radio buttons in the same column. There is probably a better way to do this but this is off the top of my head. 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);
    });
    
    点赞 打赏 评论

相关推荐 更多相似问题