代码之家 › 专栏 › 技术社区 › Rehan Azher

未提交禁用选项的选择

html jquery

Rehan Azher · 技术社区 · 6 年前

我有6个具有相似值和标签的select输入。要求是在任何一个选择中选择一个标签(值)后禁用它。我可以通过下面的代码实现这一点:

  $('select').change(function()
  {
      var value = $(this).val();
      $('option').removeAttr("disabled");
      $('select').each(function ()
      {
         $("option[value=" + $(this).val() + "]").attr("disabled","disabled");
      });
   });

但是当我提交表单时,没有一个select值被提交。

关于如何解决这个问题的任何提示。我的提交操作使用简单的HTML提交按钮,如下所示:

<button class="btn btn-md btn-primary btn-md pull-right" type="submit">Submit</button>

我的发信人很大,所以发了一部分:

<form id="headersForm"role="form" action="/lteUpdteRequestHeaders" method="POST" enctype=multipart/form-data>
          <select id="a"  name="a"><option>......</option></select>
          <select id="b" name="b"><option>......</option></select>
          <select id="c" name="c"><option>......</option></select>
          <select id="d" name="d"><option>......</option></select>
          <select id="e" name="e"><option>......</option></select>
          <select id="f" name="f"><option>......</option></select>
    <button class="btn btn-md btn-primary btn-md pull-right" type="submit">Submit</button>
</form>

select选项是动态生成的,为了简单起见,删除了这部分代码。

这不是一些朋友所说的现有问题的重复。在该场景下,用户希望提交禁用选项值或禁用选择值。

我的问题是为什么我不能提交选择的已启用选项的值(我认为已启用)。

下面两个解决方案都工作得很完美,下面是另一个使用filter来实现这一点的方法,这和下面的另一个答案一样:

$('select').on('change', function() {
  $('option').prop('disabled', false); //reset all the disabled options on every change event
  $('select').each(function() { //loop through all the select elements
    var val = this.value;
    $('select').not(this).find('option').filter(function() { //filter option elements having value as selected option
       return this.value === val;
    }).prop('disabled', true); //disable those option elements
  });
}).change();

谢谢

2 回复 | 直到 6 年前

Lord Grosse Jeanine 6 年前

根据您在评论中所说的,这里有一些代码(与原始代码有点不同…)可以满足您的需求(我希望如此)。

$('select').change(function() {

    //enable every options
    $('option').prop('disabled', false);

    //loop though selects
    $('select').each(function() {

        var $loopSelect = $(this);

        //if select value is set
        if($loopSelect.val()) {

            //disabled option matching value in every other select
            $('select')
                .not($loopSelect)
                .find('option[value="'+$loopSelect.val()+'"]')
                .prop('disabled', true);

        }
    });

});

JSFiddle: https://jsfiddle.net/ybms79ve/

wiesion 6 年前

为了获得可靠的行为,你需要有一个“选择” <option> 具有 value="" 和 disabled -否则,如果每个选项的初始状态为 <select> .

$('select').change(function() {
  /*
    Get all options from all selects,
    pick the selected ones for exclusion,
    use the selected items to generate an array of selected values
  */
  var allOptions = $('option[value!=""]'),
      selectedOptions = allOptions.filter(':selected'),
      selectedValues = selectedOptions
        .map(function() { return $(this).val() }).get();
  /*
    Loop over all not-selected items,
    if the value is within the selected values make it disabled,
    if the value is not present, enable the option
  */
  allOptions.not(selectedOptions).each(function() {
    if(selectedValues.indexOf($(this).val()) > -1) {
      $(this).attr('disabled', true);
    } else {
      $(this).removeAttr('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="#">
  <select id="a" name="a">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="b" name="b">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="c" name="c">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="d" name="d">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="e" name="e">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="f" name="f">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
</form>