Отключить выбранную опцию в одном поле выбора, если она выбрана в другом поле выбора

Привет всем, это мой первый пост здесь. У меня есть 4 поля выбора местоположения с такими параметрами, как «полный сундук», «полная спина», «передний левый сундук», «передний правый сундук» и т. д., а также 4 цветных поля, в которых указано количество цветов.

Я показываю поле выбора первого местоположения и один цвет по умолчанию и увеличиваю их, используя кнопку «Добавить еще одно местоположение» или удаляя их с помощью кнопки «Удалить местоположение». Я также сбрасываю поле выбора определенного местоположения и его цвет, если это местоположение удалено.

Также, если в одном из полей выбора выбран один параметр, этот параметр должен быть отключен в остальных трех полях выбора.

(у меня эта часть работает) Теперь, если в любом из полей выбора выбран полный сундук, то передний левый сундук и передний правый сундук должны быть отключены в оставшихся трех полях выбора. (эта часть не работает)

Кроме того, когда я удаляю местоположение и сбрасываю это значение местоположения, мне трудно повторно включить отключенную опцию из других полей местоположения или местоположения по умолчанию. Вот JSFIDDLE ( https://jsfiddle.net/booq3ota/

)

Вот мой HTML-код и CSS:

 
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');
 }
 });
}); 

Код (разметка): КОД jQUERY:

  <div class="pc-row location-1"> <div class="locations-colors pc-col quote-sizes"> <h4>Choose location below</h4> <label for="location_one"><span>Location</span> <select name="location_one" id="location_one" class="linked-drop-down"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <h4>Choose number of colors for location</h4> <label for="color_one"><span>Number of Colors</span> <select name="color_one" id="color_one"> <option value="">choose colors</option> <option value="0">One Color</option> <option value="1">Two Colors</option> <option value="2">Three Colors</option> <option value="3">Four Colors</option> </select></label> </div> </div> <div class="pc-row location-2"> <div class="locations-colors pc-col quote-sizes"> <label for="location_two"><span>Location</span> <select name="location_two" id="location_two" class="linked-drop-down"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <label for="color_two"><span>Number of Colors</span> <select name="color_two" id="color_two"> <option value="">choose colors</option> <option value="1">One Color</option> <option value="2">Two Colors</option> <option value="3">Three Colors</option> <option value="4">Four Colors</option> </select></label> </div> </div> <div class="pc-row location-3"> <div class="locations-colors pc-col quote-sizes"> <label for="location_three"><span>Location</span> <select name="location_three" id="location_three" class="linked-drop-down"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <label for="color_three"><span>Number of Colors</span> <select name="color_three" id="color_three"> <option value="">choose colors</option> <option value="1">One Color</option> <option value="2">Two Colors</option> <option value="3">Three Colors</option> <option value="4">Four Colors</option> </select></label> </div> </div> <div class="pc-row location-4"> <div class="locations-colors pc-col quote-sizes"> <label for="locatio_four"><span>Location</span> <select name="location_four" id="location_four" class="linked-drop-down"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <label for="color_four"><span>Number of Colors</span> <select name="color_four" id="color_four"> <option value="">choose colors</option> <option value="1">One Color</option> <option value="2">Two Colors</option> <option value="3">Three Colors</option> <option value="4">Four Colors</option> </select></label> </div> </div><br /> <div class="pc-row"> <div class="pc-col"> <div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div> <div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div> </div> </div> .pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top} .location-2,.location-3,.location-4{display:none}#add-location,#rm-location{margin:20px 0;width:160px;float:left}#rm-location{width:auto}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px} 

Код (разметка):

Спасибо и ценю это.