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禁用項目選項，如果選擇某個值

回答

相關問題