jquery 解決IE 6,7 「select option disabled 無效設定」

如何使用jquery 解決IE 6,7中option disabled屬性值設定無效

在IE8或是其它瀏覽器option標籤上都可以設定disabled屬性值且是有效的,但是在ie6、7版上怎樣設定皆無效,所以只好借助javascript來摸擬option disabled的屬性設定功能囉!

code:
$(document).ready(function(){
//先判斷是否為ie瀏覽器如果是繼續判斷版本是否為6或7,若非ie版本的瀏覽器則離開
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
var ieversion = new Number(RegExp.$1); //capture x.x protion adn store as a number
if (ieversion == 7 || ieversion == 6) {
//將所有select標籤做處理,將option有設屬性為disabled='true'的字體顏色變為灰色
//將每個select的標籤多加一個屬性為currentSelected並給初值如果option有設定selected屬性將優先為初值
//若沒發現則選擇option沒有設為disabled的第一個option的索引為初值
//當發現slecect發生改變,先判斷是否選擇的option的disabled的屬性設定若有則將this.currentSelected
//指定為this.selectedIndex恢復上一次的選擇,反之則指定新的currentSelected值
$("select").each(function (){
$(this).find("option[disabled='true']").css("color","gray");
this.currentSelected=$(this).find("option[selected]").first().attr("selectedIndex")
||$(this).not("option[disabled='true']").first().attr('selectedIndex');
$(this).bind("change",function(){
$("select").find("option[disabled]").css("color","black");
if($(this).find("option:selected").attr("disabled")){
this.selectedIndex=this.currentSelected;
}
else this.currentSelected=this.selectedIndex;
});
});
}
}
else
return null;
});

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s