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>

谢谢:)

来源

2012-07-27 user1510230

如果你的选择标记是兄弟姐妹，你可以尝试：

$('select').change(function(){ 
    if (this.selectedIndex == 0) { 
    $(this).siblings('select').find('option').prop('disabled', true) 
    } 
})

DEMO

来源

2012-07-27 18:27:13 undefined

我不知道我得到它，但这样的事情：

$('[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); 
    } 
});

FIDDLE

来源

2012-07-27 18:25:43 adeneo

刚请确保使用id时^ = menufoo作为一个选择器，确保你没有一个select的ID以menufoo开头，你不希望将事件处理器应用到其他选择菜单中选择interestingValue，也不能禁用它的选项。 – 2012-07-27 18:57:09

您可以将一个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")); 
});

来源

2012-07-27 18:26:55

在这里你去

<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>

来源

2012-07-27 18:40:25 user1558223

jquery禁用项目选项，如果选择某个值

回答

相关问题