jquery禁用项目选项,如果选择某个值
问题描述:
我坚持一个jQuery的问题..我实际上是想禁用所有(除了父级的所有其他项目)如果选定的值是“interestingValue”jquery禁用项目选项,如果选择某个值
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
例如:如果我们从第一个菜单中选择 “interestingValue” 我们得到
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2" disabled="disabled">bar foo2</option>
<option value="foo2" disabled="disabled">foo abc2</option>
<option value="bar2" disabled="disabled">foo abc2</option>
</select>
例如:如果我们从第二个菜单中选择 “interestingValue2” 我们得到
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue" disabled="disabled">bar foo</option>
<option value="foo1" disabled="disabled">foo abc1</option>
<option value="bar1" disabled="disabled">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
谢谢:)
答
如果你的选择标记是兄弟姐妹,你可以尝试:
$('select').change(function(){
if (this.selectedIndex == 0) {
$(this).siblings('select').find('option').prop('disabled', true)
}
})
答
我不知道我得到它,但这样的事情:
$('[id^=menufoo]').on('change', function() {
if (this.value.indexOf('interestingValue') != -1) {
$('[id^=menufoo]').not(this).find('option').prop('disabled', true);
}else{
$('[id^=menufoo]').find('option').prop('disabled', false);
}
});
答
您可以将一个onchange事件到两个选择项,并检查是否新的选择值相当于第一个菜单的interestingValue和第二个菜单的interestingValue2。您可以使用.prop()来禁用它。
你可以做这样的事情:
$("#menufoo").bind("change", function(event){
$("#menufoo2").find("option").prop("disabled", ($(this).val() == "interestingValue"));
});
$("#menufoo2").bind("change", function(event){
$("#menufoo").find("option").prop("disabled", ($(this).val() == "interestingValue2"));
});
答
在这里你去
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#menufoo").change(function(){
if($("#menufoo option:selected").val()=="interestingValue")
$('.menufooClass2 option').attr('disabled','disabled');
});
$("#menufoo2").change(function(){
if($("#menufoo2 option:selected").val()=="interestingValue2")
$('.menufooClass option').attr('disabled','disabled');
});
});
</script>
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
刚请确保使用id时^ = menufoo作为一个选择器,确保你没有一个select的ID以menufoo开头,你不希望将事件处理器应用到其他选择菜单中选择interestingValue,也不能禁用它的选项。 – 2012-07-27 18:57:09