0
2つの位置選択ボックスと2つのカラーボックスがあります。私は、他の場所の選択ボックスのいずれかから選択されている場合、場所オプションを無効にするjQueryコードを書いています。別の選択ボックスで選択すると、1つの選択ボックスから選択したオプションを無効にします。
場所ボックスの作業を記述したコードですが、場所選択ボックスのいずれかでオプションを最初に選択して何らかの理由でカラーボックスのオプションも無効になっています。私は場所の選択ボックス二度目
ここに私の完全なコードがあるからオプションを選択しようとすると、
にのみ発生します。私が間違っていること。おかげ
<div class="pc-row">
<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">
<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">
<div class="locations-colors pc-col quote-sizes">
<label for="location_two"><span>Location</span>
<select name="location_two" id="location_two">
<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>
とJavaScriptあなたのjsの中
$('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"]').attr('id');
var options = $('select:not(#' + id + ') option[value=' + value + ']');
options.attr('disabled', 'true');
}
});
});
\t $('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"]').attr('id');
var options = $('select:not(#' + id + ') option[value=' + value + ']');
options.attr('disabled', 'true');
}
});
}); \t.adult-sizes-box{margin:10px 0}#totalprice{display:none}
.quote-sizes li{margin:5px 0 10px}input.amtbox{width:100px;border:1px solid #ccc;vertical-align:middle;float:left}.quote-sizes select{border:1px solid #ccc;font-size:14px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
.section-title{background:#ddd;padding:10px;font-size:18px}.small-title{font-size:24px;color:#990000}
.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pc-row">
\t <div class="locations-colors pc-col quote-sizes">
\t <h4>Choose location below</h4>
\t <label for="location_one"><span>Location</span>
\t <select name="location_one" id="location_one">
<option value="">choose location</option>
\t \t <option value="Full_Chest">Full Chest</option>
\t \t <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>
\t \t <option value="Right_Sleeve">Right Sleeve</option> \t \t
</select></label>
\t \t
\t </div>
\t <div class="locations-colors pc-col quote-sizes">
\t <h4>Choose number of colors for location</h4>
\t <label for="color_one"><span>Number of Colors</span>
\t <select name="color_one" id="color_one">
<option value="">choose colors</option>
\t \t <option value="0">One Color</option>
\t \t <option value="1">Two Colors</option>
<option value="2">Three Colors</option>
<option value="3">Four Colors</option>
</select></label>
\t \t
\t </div>
\t </div>
\t
\t \t <div class="pc-row">
\t <div class="locations-colors pc-col quote-sizes">
\t <label for="location_two"><span>Location</span>
\t <select name="location_two" id="location_two">
<option value="">choose location</option>
\t \t <option value="Full_Chest">Full Chest</option>
\t \t <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>
\t \t <option value="Right_Sleeve">Right Sleeve</option> \t \t \t
</select></label>
\t \t
\t </div>
\t <div class="locations-colors pc-col quote-sizes">
\t <label for="color_two"><span>Number of Colors</span>
\t <select name="color_two" id="color_two">
<option value="">choose colors</option>
\t \t <option value="1">One Color</option>
\t \t <option value="2">Two Colors</option>
<option value="3">Three Colors</option>
<option value="4">Four Colors</option>
</select></label>
\t \t
\t </div>
\t </div>