how to disabled and enabled option item with jquery?

Question

I have 4 select items in my form. When the user selects one item in any of selects, I want this item to be disabled in each other select element. My problem happens when I select all option items, because it disables everything. How can I to enabled/disabled the items when they are selected/deselect?

JsFiddle

First referee: <select class="d1">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>
Second referee: <select class="d2">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>

Third referee: <select class="d3">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>
Fourth referee:<select class="d4">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>


$(document).ready(function () {

    $('.d1, .d2, .d3, .d4').change(function () {
        var V1 = $('.d1').find(":selected").text();
        var V2 = $('.d2').find(":selected").text();
        var V3 = $('.d3').find(":selected").text();
        var V4 = $('.d4').find(":selected").text();

        $('.d1, .d2, .d3, .d4').children().each(function (index, element) {
            if ($(element).text() == V1 ) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V2) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V3) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V4) {
                $(this).prop('disabled', true);
            }


        });
    });

});

Answer 1

You can try the following as a quick fix

$(document).ready(function () {

$('.d1, .d2, .d3, .d4').change(function () {
    var V1 = $('.d1').find(":selected").text();
    var V2 = $('.d2').find(":selected").text();
    var V3 = $('.d3').find(":selected").text();
    var V4 = $('.d4').find(":selected").text();

    $('select option').prop('disabled',false); // reset everything

    $('.d1, .d2, .d3, .d4').children().each(function (index, element) {
        if ($(element).text() == V1) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V2) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V3) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V4) {
            $(this).prop('disabled', true);
        }

    });
  });
});

Demo

Answer 2

If your select list are all the same you can base the disable on their index :

$(document).ready(function () {

    var $select = $('.d1, .d2, .d3, .d4').change(function () {
        $select.find('option').prop('disabled', false); //All option enabled
        $select.each(function(){
            var $this = $(this), index = $this.find(':selected').index(); //Get the index
            $select.not(this).find('option:nth-child('+ (index+1) +')').prop('disabled', true); //Select option base on their position and disable them


        })
    });

});

Fiddle : http://jsfiddle.net/u6eCL/16/

Else, here the code based on the text :

$(document).ready(function () {

    var $select = $('.d1, .d2, .d3, .d4').change(function () {
        $select.find('option').prop('disabled', false); //All option enabled
        $select.each(function(){
            var $this = $(this), text = $this.find(':selected').text(); //Get the text
            $select.not(this).find('option').filter(function(){
                return $(this).text() === text
            }).prop('disabled', true); //Select option base on their text and disable them


        })
    });

});

http://jsfiddle.net/u6eCL/15/