首頁 > web前端 > js教程 > 主體

checkbox設定複選框的唯讀效果不讓使用者勾選_javascript技巧

WBOY
發布: 2016-05-16 17:25:52
原創
1307 人瀏覽過

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

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

readonly="readonly" />
option a
                    option b
                    option c               
option a
option b
option c               
readonly="readonly"
/> option a
                  >                    option c TD> option a
option b
option b
option c               

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

/>               

                    option b
                    option c TD
option a
option b
option c               
從上面我們可以看到,無論是readonly或disabled,都沒有達到我們所期望的效果。既然直接實作不了,那我們可以變通一下,模擬實作。程式碼如下:
onclick="return false;" checked="checked" />               
onclick="return                         
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!