I've put 2 elements next to eachother. Both of them are using the jQuery Chosen plugin.

This is the code:

```
<div class="wrapper">
  <select data-placeholder="Number row 1" style="width:350px;" multiple class="chzn-select">
    <option value=""></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>
  </select>

  <select data-placeholder="Number row 2" style="width:350px;" multiple class="chzn-select">
    <option value=""></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>
  </select>
</div>

```

This is the Javascript. jQuery library, the latest Chosen plugin and CSS are all properly included ofcourse.

```
<script>
$('.chzn-select').trigger("liszt:updated");
$('.chzn-select').chosen().change( function() {
  var selectedValue = $(this).find('option:selected').val();
  $(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled');
});
</script>

```

This is what I want to accomplish with the script above.

* There are two select elements with the same values. When value "1" has been selected in element 1 for example, I want to disable it in element 2.
* However. after I deselect value "1" in element 1, it's **still** disabled in element 2. That's not what I want. The other value should be available again after deselecting the value in the 1st element.

Does anybody know how to accomplish this?

I've put up a JSFiddle here: <http://jsfiddle.net/dq97z/3/>