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

Привет всем, это мой первый пост здесь. У меня есть 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} 

Код (разметка): Спасибо и ценю это.