IE下單選按鈕隱藏後點擊對應label無法選中的bug解決

項目中,有時候填寫表單我們的選項會隱藏掉radio或者checkbox,而只顯示給用戶對應的文字選擇,如果用戶點擊label選擇時,在FF/Chrome等標準瀏覽器中隱藏掉的radio/checkbox也同樣隨着改變選中狀態,而在IE下則不會發生變化。

注意,需要指定表單元素的id屬性然後使用label的for屬性綁定控件。

代碼示例:


<input type="radio" name="gender" id="gender1" value="男" checked="checked" />
<label for="gender1">男</label>
<input type="radio" name="gender" id="gender2" value="女" />
<label for="gender2">女</label>


通過CSS設置display:none 或者 visibility: hidden隱藏掉radio按鈕,則當點擊label切換選擇狀態時,對應的按鈕實際上是未被改變狀態。解決方法有幾種:


1.通過javascript腳本來再次操作DOM保證選擇狀態


$("label").click(function(e){
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
});
2.不使用display:none,通過position屬性定位到可視區域外,避開問題。
position: absolute;
top: -999px;
left: -999px;
3.通過z-index/width或透明度opacity將元素隱藏掉。
input{
    position: absolute;
    z-index: -1;
}
或者是
input{
width: 0;
}
或者是
input{
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity:0);

}

需要提醒的是,label的for屬性是內聯元素,其對應的js屬性爲htmlFor,例如可以這樣訪問或設置for屬性值。document.getElementById("xxx").htmlFor="inputid";;



目前IE6-IE9都有這樣的問題,不知道IE以後會不會和標準瀏覽器的行爲看齊。希望吧!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章