title: How to Disable the combobox values on selection in multiple comboboxes JQuery?
body: <p>I want to disable the values in combobox on selection for multiple comboboxes.
  Like i have a four combobox1, combobox2, combobox3, combobox4 with values <strong>Select</strong>,1,2,3,4 and 5.
  Now, if i select value '1' from combobox1, then it should be disabled from all other comboboxes. And then if i select '2' from combobox2, then it should be disabled in combobox1 and combobox3 with value '1' disabled in combobox3 also.</p>
  
  <p>More clearly : </p>
  
  <ul>
  <li>Combobox1 - selected - value '1'</li>
  <li>Combobox2 - selected - value '2'</li>
  <li>Combobox3 - selected - value '3'</li>
  </ul>
  
  <p><strong>Now the result should be :</strong> </p>
  
  <ul>
  <li><p>Combobox1 - Disabled values - '2','3' but not 1/3/4/5</p></li>
  <li><p>Combobox2 - Disabled values - '1','3' but not 3/4/5</p></li>
  <li><p>Combobox3 - Disabled values - '1','2' but not 3/4/5</p></li>
  <li><p>Combobox4 - Disabled values - '1','2','3' but not 4/5</p></li>
  </ul>
  
  <p><strong>EDIT</strong> </p>
  
  <p>If Combobox1 is selected with Option "Select" then it should disable all the other combobxes except combobox1 and reset all the values with 0 index for all other comboboxes. </p>
  
  <p>But what happening with the code, when i select value 1 from combobox it is disabled for combobox 2 and 3, but when selecting value '2' from combobox2, the value '1' combobox3 gets enabled.</p>
  
  <p>Here is what i have done so far :</p>
  
  <p><strong>HTML Code :</strong>
      </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Language test page&lt;/title&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;select name="g1" id="select_g1"&gt;
      &lt;option value="select1"&gt;Select&lt;/option&gt;
      &lt;option value="one"&gt;one&lt;/option&gt;
      &lt;option value="two"&gt;two&lt;/option&gt;
      &lt;option value="three"&gt;three&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="g2" id="select_g2"&gt;
  &lt;option value="select2"&gt;Select&lt;/option&gt;
      &lt;option value="one"&gt;one&lt;/option&gt;
      &lt;option value="two"&gt;two&lt;/option&gt;
      &lt;option value="three"&gt;three&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="g3" id="select_g3"&gt;
  &lt;option value="select3"&gt;Select&lt;/option&gt;
      &lt;option value="one"&gt;one&lt;/option&gt;
      &lt;option value="two"&gt;two&lt;/option&gt;
      &lt;option value="three"&gt;three&lt;/option&gt;
  &lt;/select&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JQuery Code :</strong></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $('select').on('change', function (e) {
              $('select option').prop('disabled', false);
              var optionSelected = $("option:selected", this);
  
              var valueSelected = this.value;
  
              $("select option:contains('" + valueSelected + "')").each(function(){
                  if(valueSelected === this.value){
                      this.disabled = true;
                  }else{
                      this.disabled = false;
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help is appreciated. </p>