根据以前禁用的选择选项禁用模态窗口中的选择选项？

Question

我在一个模态窗口中有多个选择下拉列表，它根据主页面上相同的选择下拉列表进行预填充（我使用的是Foundation 4）。在两个下拉菜单中，都存在用户无法选择的特定组合。我已经完成了所有这些工作，除非模态窗口出现时用户可以首先进行非法选择，除非他们更改选项然后再尝试更改它。当模态窗口弹出时，我需要它使非法选项变灰，而不是像我现在一样改变模态窗口上的选择。任何人都可以帮助我吗？

这是HTML：

<!-- THE ON-PAGE DROPDOWN -->
<div id="choose">
<h1><strong>Choose your FREE bag of Coffee</strong></h1>
<!--START BLENDS-->
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="blend1" id="blend1">
<option value="">Choose Blend</option> 
<option value="">&mdash;&mdash;&mdash;&mdash;&mdash;</option> 
<option value="1"> Light</option> 
<option value="2">Medium</option> 
<option value="3">Dark</option> 
<option value="4">Robust</option> 
<option value="5">French Vanilla</option> 
<option value="6">Caramel Vanilla</option> 
<option value="7">Hazelnut &amp; Cinnamon</option> 
<option value="8">Passionata &mdash; Chocolate Truffles</option> 
</select>
</div>
</div>
<!--END BLENDS-->
<fieldset>

<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="grind1" id="grind1">
<option value="">Choose Grind</option> 
<option value="">&mdash;&mdash;&mdash;&mdash;&mdash;</option> 
<option value="1">Ground</option> 
<option value="2">Whole Bean</option> 
</select>
</div>    
</div>

<div class="clearfix"></div>

<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="type1" id="type1">
<option value="">Choose Type</option> 
<option value="">&mdash;&mdash;&mdash;&mdash;&mdash;</option> 
<option value="1">Regular</option> 
<option value="2">Decaf</option> 
</select>
</div>    
</div>
</fieldset>
</div>

<!-- END OF MAIN PAGE DROPDOWN -->

<!-- MODAL WINDOW HTML -->                          

<div class="choice" >
<select name="blend2" id="blend2">
<option value="">Choose Blend</option> 
<option value="">&mdash;&mdash;&mdash;&mdash;&mdash;</option> 
<option value="1">Light</option> 
<option value="2">Medium</option> 
<option value="3">Dark</option> 
<option value="4">Robust</option> 
<option value="5">French Vanilla</option> 
<option value="6">Caramel Vanilla</option> 
<option value="7">Hazelnut &amp; Cinnamon</option> 
<option value="8">Chocolate Truffles</option> 
</select>
</div>
<div class="choice2">
<select name="grind2" id="grind2">
<option value="">Choose Grind</option> 
<option value="">&mdash;&mdash;&mdash;&mdash;&mdash;</option> 
<option value="1">Ground</option> 
<option value="2">Whole Bean</option> 
</select>



<select name="type2" id="type2">
<option value="">Choose Type</option> 
<option value="">&mdash;&mdash;&mdash;&mdash;&mdash;</option> 
<option value="1">Regular</option> 
<option value="2">Decaf</option> 
</select>
</div>

这是JS / jQuery：

<script>
$("#blend1").change(function () {
if ($(this).val() == "1") {
$("#blend2").val("1");
}
if ($(this).val() == "2") {
$("#blend2").val("2");
}
if ($(this).val() == "3") {
$("#blend2").val("3");
}
if ($(this).val() == "4") {
$("#blend2").val("4");
}
if ($(this).val() == "5") {
$("#blend2").val("5");
}
if ($(this).val() == "6") {
$("#blend2").val("6");
}
if ($(this).val() == "7") {
$("#blend2").val("7");
}
if ($(this).val() == "8") {
$("#blend2").val("8");
}
});

$("#grind1").change(function () {
if ($(this).val() == "1") {
$("#grind2").val("1");
}
if ($(this).val() == "2") {
$("#grind2").val("2");
}
});

$("#type1").change(function () {
if ($(this).val() == "1") {
$("#type2").val("1");
}
if ($(this).val() == "2") {
$("#type2").val("2");
}
});
</script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

$("select[name='grind1']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='type1'] option[value=2]").attr('disabled', true);
} else {
$("select[name='type1'] option[value=2]").attr('disabled', false);       
}
});

$("select[name='type1']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='grind1'] option[value=2]").attr('disabled', true);
} else {
$("select[name='grind1'] option[value=2]").attr('disabled', false);       
}
});

});

</script>

<!-- NO BONUS UPSELL -->
<script language="javascript" type="text/javascript">
$.noConflict();
$(document).ready(function() {

$("select[name='grind2']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='type2'] option[value=2]").attr('disabled', true);
} else {
$("select[name='type2'] option[value=2]").attr('disabled', false);       
}
});

$("select[name='type2']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='grind2'] option[value=2]").attr('disabled', true);
} else {
$("select[name='grind2'] option[value=2]").attr('disabled', false);       
}
});

});

</script>

如果有人能帮助我，那太棒了！