Disable selected option from one select box when selected in another select box

Disable selected option from one select box when selected in another select box

Hi to everyone, This is my first post here,

I have 4 location select boxes with options like full chest, full back, front left chest, front right chest and so on and 4 color boxes that say the number of colors.

I am showing location one and color one select box as default, and increment them by using add one more location button or removing them by using remove location button. I am also resetting the select box of a particular location and its color, if that location is removed.

Also If one option is selected in one of the select boxes that option should be disabled in the remaining 3 select boxes. ( I have this part working )

Now, If full chest is selected in any one of the select boxes then front left chest and front right chest should be disabled in the remaining 3 select boxes. ( this part not working )

Also When I remove a location and resetting that location value, I am having hard time re-enabling the disabled option from other location boxes or the default location.

Here is a JSFIDDLE ( https://jsfiddle.net/booq3ota/)

Here is my HTML CODE and CSS:

  1.     <div class="pc-row location-1">
  2.         <div class="locations-colors pc-col quote-sizes">
  3.           <h4>Choose location below</h4>
  4.            <label for="location_one"><span>Location</span>
  5.     <select name="location_one" id="location_one" class="linked-drop-down">
  6.              <option value="">choose location</option>
  7.              <option value="Full_Chest">Full Chest</option>
  8.              <option value="Full_Back">Full Back</option>
  9.              <option value="Front_Left_Chest">Front Left Chest</option>
  10.              <option value="Front_Right_Chest">Front Right Chest</option>
  11.              <option value="Left_Sleeve">Left Sleeve</option>
  12.              <option value="Right_Sleeve">Right Sleeve</option>      
  13.             </select></label>
  14.          
  15.         </div>
  16.         <div class="locations-colors pc-col quote-sizes">
  17.           <h4>Choose number of colors for location</h4>
  18.            <label for="color_one"><span>Number of Colors</span>
  19.             <select name="color_one" id="color_one">
  20.              <option value="">choose colors</option>
  21.              <option value="0">One Color</option>
  22.              <option value="1">Two Colors</option>
  23.              <option value="2">Three Colors</option>
  24.              <option value="3">Four Colors</option>
  25.             </select></label>
  26.          
  27.         </div>
  28.         </div>
  29.         <div class="pc-row location-2">
  30.             <div class="locations-colors pc-col quote-sizes">
  31.            <label for="location_two"><span>Location</span>
  32.     <select name="location_two" id="location_two" class="linked-drop-down">
  33.              <option value="">choose location</option>
  34.              <option value="Full_Chest">Full Chest</option>
  35.              <option value="Full_Back">Full Back</option>
  36.              <option value="Front_Left_Chest">Front Left Chest</option>
  37.              <option value="Front_Right_Chest">Front Right Chest</option>
  38.              <option value="Left_Sleeve">Left Sleeve</option>
  39.              <option value="Right_Sleeve">Right Sleeve</option>      
  40.             </select></label>
  41.          
  42.         </div>
  43.         <div class="locations-colors pc-col quote-sizes">
  44.            <label for="color_two"><span>Number of Colors</span>
  45.             <select name="color_two" id="color_two">
  46.              <option value="">choose colors</option>
  47.              <option value="1">One Color</option>
  48.              <option value="2">Two Colors</option>
  49.              <option value="3">Three Colors</option>
  50.              <option value="4">Four Colors</option>
  51.             </select></label>
  52.          
  53.         </div>
  54.         </div>
  55.             <div class="pc-row location-3">
  56.             <div class="locations-colors pc-col quote-sizes">
  57.            <label for="location_three"><span>Location</span>
  58.     <select name="location_three" id="location_three" class="linked-drop-down">
  59.              <option value="">choose location</option>
  60.              <option value="Full_Chest">Full Chest</option>
  61.              <option value="Full_Back">Full Back</option>
  62.              <option value="Front_Left_Chest">Front Left Chest</option>
  63.              <option value="Front_Right_Chest">Front Right Chest</option>
  64.              <option value="Left_Sleeve">Left Sleeve</option>
  65.              <option value="Right_Sleeve">Right Sleeve</option>      
  66.             </select></label>
  67.          
  68.         </div>
  69.         <div class="locations-colors pc-col quote-sizes">
  70.            <label for="color_three"><span>Number of Colors</span>
  71.             <select name="color_three" id="color_three">
  72.              <option value="">choose colors</option>
  73.              <option value="1">One Color</option>
  74.              <option value="2">Two Colors</option>
  75.              <option value="3">Three Colors</option>
  76.              <option value="4">Four Colors</option>
  77.             </select></label>
  78.          
  79.         </div>
  80.         </div>
  81.             <div class="pc-row location-4">
  82.             <div class="locations-colors pc-col quote-sizes">
  83.            <label for="locatio_four"><span>Location</span>
  84.     <select name="location_four" id="location_four" class="linked-drop-down">
  85.              <option value="">choose location</option>
  86.              <option value="Full_Chest">Full Chest</option>
  87.              <option value="Full_Back">Full Back</option>
  88.              <option value="Front_Left_Chest">Front Left Chest</option>
  89.              <option value="Front_Right_Chest">Front Right Chest</option>
  90.              <option value="Left_Sleeve">Left Sleeve</option>
  91.              <option value="Right_Sleeve">Right Sleeve</option>      
  92.             </select></label>
  93.          
  94.         </div>
  95.         <div class="locations-colors pc-col quote-sizes">
  96.            <label for="color_four"><span>Number of Colors</span>
  97.             <select name="color_four" id="color_four">
  98.              <option value="">choose colors</option>
  99.              <option value="1">One Color</option>
  100.              <option value="2">Two Colors</option>
  101.              <option value="3">Three Colors</option>
  102.              <option value="4">Four Colors</option>
  103.             </select></label>
  104.          
  105.         </div>
  106.         </div><br />
  107.       <div class="pc-row">
  108.       <div class="pc-col">
  109.     <div id="add-location">
  110.     <a href="javascript:void(0);" class="addonemore">Add one more location</a>
  111.     </div>
  112.      <div id="rm-location">
  113.      <a href="javascript:void(0);" class="rmone">Remove one location</a>
  114.      </div>
  115.       </div>
  116.     </div>
  117.     .pc-row {width: 100%; display: table; table-layout: fixed; }
  118.     .pc-col {display:table-cell;vertical-align:top}
  119.     .location-2,.location-3,.location-4{display:none}
  120.     #add-location,#rm-location{margin:20px 0;width:160px;float:left}
  121.     #rm-location{width:auto}
  122.     #add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}
and the jQuery CODE: 

  1. var i = 1;
$(".addonemore").click(function(){
  if( i > 3){
      alert("You can add only a maximum of 4 locations");
  } else {
      i++;
      $('.location-'+i).css({'display':'table'});
  }
});
$(".rmone").click(function(){
  if( i < 2){
      alert("You need at least one location and color");
  } else {
      $('.location-'+i).css({'display':'none'}).find("option[value='']").attr({'selected':'selected'});
      i--;
  }
});
    $('select[name*="location"]').change(function() {
    var selectedOptions = $('select option:selected');
    $('select option').removeAttr('disabled');
    selectedOptions.each(function() {     
        var value = this.value;
        if (value !== ''){        
        var id = $(this).parent('select[name*="location"]').prop('id');
        var options = $('select[name*="location"]:not(#' + id + ') option[value=' + value + ']');
        options.prop('disabled', 'true');
        }
    });
});
Thanks