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

在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