多选，如何将“禁用”添加到其他多选

Question

我有 3 个字段多选，有相同的选项可供选择。

<div>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">TAB 1:</a></li>
  <li><a data-toggle="tab" href="#tab2">TAB 2:</a></li>    
  <li><a data-toggle="tab" href="#tab3">TAB 3:</a></li>  
</ul>

<div class="tab-content">

  <!-- TAB 1 -->
  <div id="tab1" class="tab-pane fade in active">    
    <div class="form-group">
      <label class="control-label col-sm-3" for="select1">Produkt:</label> 
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select2', 'select3')" multiple name="select1[]" id="select1">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option> 
          <option value="produkt3">Produkt 3</option> 
          <option value="produkt4">Produkt 4</option>                        
        </select>
      </div>
    </div>
  </div>
  <!-- TAB 2-->
  <div id="tab2" class="tab-pane fade">    
    <div class="form-group">
      <label class="control-label col-sm-3" for="select2">Produkt:</label> 
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select1', 'select3')" multiple name="select2[]" id="select2">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option> 
          <option value="produkt3">Produkt 3</option> 
          <option value="produkt4">Produkt 4</option>                        
        </select>
      </div>
    </div>
  </div>
  <!-- TAB 3-->
  <div id="tab3" class="tab-pane fade">    
    <div class="form-group">
      <label class="control-label col-sm-3" for="select3">Produkt:</label> 
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select1', 'select2')" multiple name="select3[]" id="select3">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option> 
          <option value="produkt3">Produkt 3</option> 
          <option value="produkt4">Produkt 4</option>                        
        </select>
      </div>
    </div>
  </div>

</div>

</div>

现在结合一整天的操作方法 funkcja(this, 'select2', 'select3') - 从选择中调用 onchange 将“禁用”添加到其他选项卡中其余选择中的相同选项。 我认为它看起来像那样，但它不起作用：

function funkcja(element, select2, select3) 
{
    var select2 = document.getElementById(select2);
    var select3 = document.getElementById(select3);
    for (var i = 0; i < element.length; i++) 
    {
        if (element.options[i].selected) 
        {
            select2.options[i].disabled;
            select3.options[i].disabled;
        }
    }
}

我曾试图通过 jQuery 达到相同的效果，但也没有成功。我真的需要帮助解决这个问题

Answer 1

你使用

select2.options[i].disabled

使用此语句，您将获得 disabled 的值。所以你必须将值更改为真/假。

select2.options[i].disabled = true; // disabled

select2.options[i].disabled = false; // not disabled

Answer 2

这里是 jquery 版本：

$('select').click(function()
{
$('select').find("option").prop("disabled",false); // clear all disabled options
    var $this_select_id = this.id;  // get the id of the select which was clicked.
    $(this).find("option:selected").each(function() // iterate through the current selected select tag to see which options are selected
    {
        var option = $(this); // get the option object
        $('select').each(function() // iterate through select to find the corresponding selected options.
        {
            if(this.id != $this_select_id) // ignore if the id is equal to the id of the one which was clicked
            {
                var optionVal = $(option).val(); // get the value of the option 
                $(this).find("option[value='" + optionVal + "']").prop("disabled",true); // find the same option in the other select and disable them
            }
        });
    });
});

http://jsfiddle.net/j6um1sq2/5/

Answer 3

使用一点 jquery，这很容易实现。

此外，如果项目的选择被撤消，则此选项会重置其他选择状态

function funkcja(sel, sel1, sel2) {
  var options = $(sel).find("option");
  var options1 = $("#" + sel1).find("option");
  var options2 = $("#" + sel2).find("option");
  $.each(options, function(index) {
    var opt = findOption(options1, $(this).val());
    disableProduct(opt, this);
    opt = opt = findOption(options2, $(this).val());
    disableProduct(opt, this);
  });
}


function disableProduct(opt, opt1) {
  if (opt !== undefined || !$(opt).is(":disable")) {
    if ($(opt1).is(":selected"))
      $(opt).attr('disabled', 'true');
    else
      $(opt).removeAttr('disabled');
  }
}

function findOption(opts, val) {
  for (var i = 0; i < opts.length; i++) {
    if (opts[i].value === val)
      return opts[i];
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="tab-content">

  <!-- TAB 1 -->
  <div id="tab1" class="tab-pane fade in active">
    <div class="form-group">
      <label class="control-label col-sm-3" for="select1">Produkt:</label>
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select2', 'select3');" multiple name="select1[]" id="select1">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option>
          <option value="produkt3">Produkt 3</option>
          <option value="produkt4">Produkt 4</option>
        </select>
      </div>
    </div>
  </div>
  <!-- TAB 2-->
  <div id="tab2" class="tab-pane fade">
    <div class="form-group">
      <label class="control-label col-sm-3" for="select2">Produkt:</label>
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select1', 'select3');" multiple name="select2[]" id="select2">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option>
          <option value="produkt3">Produkt 3</option>
          <option value="produkt4">Produkt 4</option>
        </select>
      </div>
    </div>
  </div>
  <!-- TAB 3-->
  <div id="tab3" class="tab-pane fade">
    <div class="form-group">
      <label class="control-label col-sm-3" for="select3">Produkt:</label>
      <div class="col-sm-9">
        <select onchange="funkcja(this, 'select1', 'select2');" multiple name="select3[]" id="select3">
          <option value="produkt1">Produkt 1</option>
          <option value="produkt2">Produkt 2</option>
          <option value="produkt3">Produkt 3</option>
          <option value="produkt4">Produkt 4</option>
        </select>
      </div>
    </div>
  </div>

</div>

编辑：注意到，如果我在 select3 上选择了 product3 并且在 select2 中禁用了 product1，这将重新启用它。所以我更正了检查道具的状态，只有它是启用的

Answer 4

如果您使用 jquery 选择的插件，您必须触发 chosen:updated 事件来应用您所做的更改，请尝试以下代码：

select2.options[i].disabled = true;
select2.options[i].trigger('chosen:updated');

select3 也是如此，希望对您有所帮助。

Example fiddle.