Question

我有6个选择输入，具有相似的值和标签。要求是在任何选择中选择后禁用一个标签（值）。我可以使用以下代码实现这一点：

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

My From非常大，所以张贴了部分内容：

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

选择选项是动态生成的，为了简单起见，删除了那部分代码。

这与一些朋友指出的现有问题不重复。在这种情况下，用户想要提交“禁用选项”值或“禁用选择值”。

我的问题是为什么我无法提交选定的已启用选项的值（我认为已启用）。

以下两个解决方案都完美无缺，这是使用过滤器实现此目的的另一种方法，这是来自SO的另一个答案：

$('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();

谢谢

Answer 1

为了获得可靠的行为，您需要拥有一个＆＃34;选择一个选项＆＃34; <option> value=""和disabled的{{1}} - 否则，根据每个<select>的所选选项的初始状态，您的要求会遇到问题。

＆＃13;

$('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');
    }
  });
});

＆＃13;

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

＆＃13;

Answer 2

根据你在评论中所说的，这里有一些代码（与原版有点不同......），你做了你想做的事情（我希望）。

$('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/

选择已禁用选项但未提交

2 个答案: