Disable Options

--

by Omar Yafer Garcia

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<select name="select1">
  <option value="val1">value 1</option>
  <option value="val2">value 2</option>
  <option value="val3">value 3</option>
</select>

<select name="select2" disabled="">
  <option value="val1" disabled="">value 1</option>
  <option value="val2" disabled="">value 2</option>
  <option value="val3" disabled="">value 3</option>
</select>

JavaScript

(function($){
	$(document).ready(function(){
  	$('select[name="select1"]').on('change', function(){
    	var sel1 = $(this);
      var sel2 = $('select[name="select2"]');

			sel2.removeAttr("disabled");  //Enables Select 2
			sel2.children().attr('disabled','disabled'); //Disables all select  2 options
      
      if(sel1.val() === 'val1'){//Checks the select value
        sel2.find('option[value="val1"]').removeAttr('disabled'); //enables a specific option
        sel2.find('option[value="val2"]').removeAttr('disabled');
      }
      else if(sel1.val() === 'val2'){
        sel2.find('option[value="val2"]').removeAttr('disabled');
        sel2.find('option[value="val3"]').removeAttr('disabled');
      }
      else if(sel1.val() === 'val3'){
        sel2.children().removeAttr("disabled");
      }
    });  
  });

})(jQuery);