DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> checkbox設置復選框的只讀效果不讓用戶勾選
checkbox設置復選框的只讀效果不讓用戶勾選
編輯:關於JavaScript     

在Web開發中,有時候需要顯示一些復選框(checkbox),表明這個地方是可以進行勾選操作的,但是有時候是只想告知用戶"這個地方是可以進行勾選操作的"而不想讓用戶在此處勾選(比如在信息展示頁面),這時候就需要將復選框設置成只讀的效果。

提到只讀,很容易想到使用readonly屬性,但是對於復選框來說,這個屬性和期望得到的效果是有差別的。原因在於readonly屬性關聯的是頁面元素的value屬性(例如textbox,設置了readonly就不能修改輸入框的文本內容),而復選框的勾選/取消並不改變其value屬性,改變的只是一個checked狀態。所以對於checkbox來說,設置了readonly,仍然是可以勾選/取消的。效果如下:

<input type="text" name="realname" value="只讀的文本內容..." readonly="readonly" /> <input type="checkbox" name="optiona" readonly="readonly" />option a
                    <input type="checkbox" name="optionb" readonly="readonly" />option b
                    <input type="checkbox" name="optionc" readonly="readonly" />option c                option a
option b
option c               

和readonly類似的,還有一個disabled屬性,這個屬性的作用是設置頁面元素為不可用,即不可進行任何交互操作(包括不可修改value屬性、不可修改checked狀態等)。效果如下:

<input type="text" name="realname" value="輸入的文本內容..." disabled="disabled" />                                    <input type="checkbox" name="optiona" disabled="disabled" />option a
                    <input type="checkbox" name="optionb" disabled="disabled" />option b
                    <input type="checkbox" name="optionc" disabled="disabled" />option c                option a
option b
option c               

從上面我們可以看到,無論是readonly還是disabled,都沒有實現我們期望的效果。既然直接實現不了,那麼我們可以變通一下,模擬實現。代碼如下:

<input type="checkbox" name="chkAllowed" onclick="return                        false;" checked="checked" />               
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved