2011-02-09 62 views
7

夥計們我使用了下面的代碼來禁用使用jQuery的選項(jquery-1.4.2.min)。禁用發生在Firefox中,但不在IE中。Jquery在下拉菜單中禁用選項

<SELECT NAME="SCOPE" id="SCOPE"> 
<OPTION VALUE="G"> Global 
<OPTION VALUE="D"> Dynamic 
</SELECT> 


$("#SCOPE option[value='G']").attr("disabled","disabled"); 
$("#SCOPE option[value='D']").attr("selected", "selected"); 
+5

如果我記得不錯,IE不會識別`option`標籤的禁用。 – 2011-02-09 11:51:55

回答

6

我想我可能是錯的,但它可能是因爲選擇而不是選項可以被禁用。由於Firefox很棒,IE很糟糕,所以你可以猜測爲什麼:)你有這個問題。使用CSS灰化該選項的文本。

然後在jQuery上做這樣的事情。

$('#SCOPE').change(function(){ 
    if($('#SCOPE option[value="'+$(this).val()+'"]').attr('disabled') == 'disabled'){ 
    alert('Its disabled you cannot select this option'); 
    } 
}); 

BTW。仔細檢查代碼,因爲我還沒有測試過這個:)

0

我的看法與其他答案有點不同。

目標不是隱藏選項,而是讓它們禁用(以保持UI一致)。

我的場景:

我有一個形式的多個選擇,並且當用戶的在選擇的一個選擇的選項的選擇的其他應禁用該選項,反之亦然。用戶被限制選擇已經選擇的相同選項。我們通常禁用該選項,但對於不支持它的IE 7。用戶還可以選擇添加新的選擇。

解決方案:

負載:

如果瀏覽器IE7是然後在填充的選擇和禁用其他選擇我增加了自定義屬性的選項已經選擇的選項(「數據 - ie7-disabled「)並且將禁用選項的顏色更改爲」#cccccc「(這是禁用選項的標準顏色)。這使得UI在各種瀏覽器中看起來相同。

在變化:

我保存在一個局部變量(這是保存在焦點)的一個選項。

當用戶試圖改變的選項

用戶選擇未在任何其他下拉選擇一個完整的新選項。然後我遍歷其他選擇並更改顏色,並將自定義屬性添加到其他選擇上的此選定選項。

當用戶選擇一個已經選擇的選項(該選項已呈灰色)。我首先檢查該選項是否具有此自定義屬性。如果它有,那麼>我簡單地將選項恢復爲前一個,並顯示錯誤消息「這個選項已被選中或BLAH BLAH」。

當用戶將其現有選項更改爲未在其他任何下拉列表中選中的全新選項時。我再次遍歷所有其他選擇選項,並刪除它的顏色和自定義屬性。

希望這會有所幫助。