2012年4月20日 星期五

hyperlink 可以 disabled 嗎?

記得以前在網頁上,如果想要把一個按鈕變成不可點擊,只需要將該按鈕的屬性設為  disabled  就可以了。只是現在我是有很多個超連結(hyperlink),也希望透過設定 disabled 就能把該超連結變成無效且不可點擊。

於是我試著寫出以下的測試程式:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="#" onclick="alert('A1');" >A1</a> <br />
    <a href="#" onclick="alert('A2');" >A2</a> <br />   
    <a href="#" onclick="alert('A3');" disabled="disabled" >A3</a>
    </div>

    <div>
    <input type="button" value="B1" onclick="alert('B1');" /> <br />
    <input type="button" value="B2" onclick="alert('B2');" /> <br />
    <input type="button" value="B3" onclick="alert('B3');" disabled="disabled" />
   
    </div>
    </form>
</body>
</html>

這似乎沒甚麼難的,只是... 當我開啟 firefox、chrome 等瀏覽器時,原先被設為 disabled 的超連結竟然還可以被點選,且觸發 onclick 事件。這種現象在 Button 身上並不會因瀏覽器不同而有所差異,目前只有超連結才會。

為了避免這不一致的運作行為,我參考了 Disable anchors in Chrome/WebKit/Safari 的作法,去判斷每一個超連結,如果屬性有設 disabled,就避免觸發 click 事件。

所以加上一段 jQuery Code 去處理所有 disabled 的超連結後,就可以適用於各瀏覽器了。


<script>
    $(function () {
        //避免 disabled 的 hyperlink 被觸發, chrome,firefox 需要這段處理
        $("a").click(function () {
            if ($(this).attr("disabled") == "disabled") {

                event.preventDefault();
            }

        });
    });
</script>
 
參考:
01: Disable anchors in Chrome/WebKit/Safari
02: jQuery .attr(“disabled”, “disabled”) not working in Chrome
03:.prop() vs .attr()