Multiselect, how add "disabled" to other multiselect

Question

I have 3 fields multiselect with the same options to choose.

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

Now combines all day how to do so funkcja(this, 'select2', 'select3') - called onchange from select add "disabled" to the same options in the rest selects in other tabs. I think it will be looks something like that, but it doesn't work:

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

I had trying to reach the same effect by jQuery, but without success too. I really need help with that problem

Answer 1

If you're using jquery chosen plugin you have to trigger chosen:updated event to apply the change you're doing, try the following code :

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

And same for select3, hope this helps.

Example fiddle.

Answer 2

Here's the jquery version :

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

Using a little jquery, this is easily achieveable.

Besides, this ones reset the other select states if the selection of the item is undone

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>

Edit: Noticed that, if I selected product3 on select3 and product1 was disabled in select2, this would reenable it. So i corrected to check the state of the prop only is its enabled

Answer 4

You use

select2.options[i].disabled

with this statement you get the value of disabled. So you have to change the value to true/false.

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

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