使用jQuery禁用并启用下拉选项 [英] Disable and enable dropdown options using jQuery
本文介绍了使用jQuery禁用并启用下拉选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有2个下拉菜单，如下所示：
< div class =col-sm-2 uno_part_wrapper> ;
< select class =form-control switcherid =1st-dd>
< option value =23disable_child =yclass =disableDropdown>无口袋< / option>
< option value =24disable_child =nselected =selected
class =disableDropdown> 1 Pocket< / option>
< option value =25disable_child =nclass =disableDropdown> 2 Pocket< / option>
< / select>
< / div>
< div class =col-sm-2 uno_part_wrapper>
< option value =26>无翻转< / option>
< option value =27selected =selected> Flap Pocket< / option>
< / select>
< / div>
我想要的是当我选择无口袋在dropdown1中，禁用下拉选项2和启用如果在下拉列表中选择了任何其他选项1.
以下是我正在尝试的内容。
$（。disableDropdown）。click（function（）{
//alert($(this).attr(\"disable_child ））;
if（$（this）.attr（disable_child）==y）
{
$（＃flap-drop）。attr（disabled ，true）;
}
else {
$（＃flap-drop）。attr（disabled，false）;
}
}） ;
这里有什么不对？
这里是小提琴的相同。
解决方案<
$（＃1st-dd）。change（function（）{$（＃flap-drop）。attr（disabled，this.value == （）; //或$（＃flap-drop）。toggle（this.value！=23）;}）;
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min。 js>< / script>< div class =col-sm-2 uno_part_wrapper> < select class =form-control switcherid =1st-dd> < option value =23disable_child =yclass =disableDropdown> No Pocket< / option> < option value =24disable_child =nselected =selectedclass =disableDropdown> 1 Pocket< / option> < option value =25disable_child =nclass =disableDropdown> 2 Pocket< / option> < / select>< / div>< div class =col-sm-2 uno_part_wrapper> < select class =form-control switcherid =flap-drop> < option value =26>无翻动< / option> < option value =27selected =selected> Flap Pocket< / option> < / select>< / div>
办法。
而不是点击我使用更改并比较与您的值相同的值
I have 2 drop-down like below:
<div class="col-sm-2 uno_part_wrapper">
<select class="form-control switcher" id ="1st-dd">
<option value="23" disable_child= "y" class="disableDropdown">No Pocket</option>
<option value="24" disable_child= "n" selected="selected"
class="disableDropdown">1 Pocket</option>
<option value="25" disable_child= "n" class="disableDropdown">2 Pocket</option>
</select>
</div>
<div class="col-sm-2 uno_part_wrapper">
<select class="form-control switcher" id = "flap-drop">
<option value="26">No Flap</option>
<option value="27" selected="selected">Flap Pocket</option>
</select>
</div>
What I want is when I select No Pocket in dropdown1, disable both the options of dropdown 2. And enable If any other option is selected in dropdown 1.
Here's what I am trying.
$(".disableDropdown").click(function(){
//alert($(this).attr("disable_child"));
if( $(this).attr("disable_child") == "y")
{
$("#flap-drop").attr("disabled",true);
}
else{
$("#flap-drop").attr("disabled",false);
}
});
What's wrong here?
Here's the fiddle for the same.
解决方案
$("#1st-dd").change(function() {
$("#flap-drop").attr("disabled", this.value=="23");
// or $("#flap-drop").toggle(this.value!="23");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-2 uno_part_wrapper">
<select class="form-control switcher" id="1st-dd">
<option value="23" disable_child="y" class="disableDropdown">No Pocket</option>
<option value="24" disable_child="n" selected="selected" class="disableDropdown">1 Pocket</option>
<option value="25" disable_child="n" class="disableDropdown">2 Pocket</option>
</select>
</div>
<div class="col-sm-2 uno_part_wrapper">
<select class="form-control switcher" id="flap-drop">
<option value="26">No Flap</option>
<option value="27" selected="selected">Flap Pocket</option>
</select>
</div>
Try it this way.
Instead of click i used change and compare the values same as you did
这篇关于使用jQuery禁用并启用下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
