checkbox設(shè)置復(fù)選框的只讀效果不讓用戶勾選

更新時間：2013年08月12日 11:19:24 作者：

有時候是只想告知用戶這個地方是可以進(jìn)行勾選操作的而不想讓用戶在此處勾選（比如在信息展示頁面），這時候就需要將復(fù)選框設(shè)置成只讀的效果，具體實現(xiàn)方法如下

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

提到只讀，很容易想到使用readonly屬性，但是對于復(fù)選框來說，這個屬性和期望得到的效果是有差別的。原因在于readonly屬性關(guān)聯(lián)的是頁面元素的value屬性（例如textbox，設(shè)置了readonly就不能修改輸入框的文本內(nèi)容），而復(fù)選框的勾選/取消并不改變其value屬性，改變的只是一個checked狀態(tài)。所以對于checkbox來說，設(shè)置了readonly，仍然是可以勾選/取消的。效果如下：

<input type="text" name="realname" value="只讀的文本內(nèi)容..." 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屬性，這個屬性的作用是設(shè)置頁面元素為不可用，即不可進(jìn)行任何交互操作（包括不可修改value屬性、不可修改checked狀態(tài)等）。效果如下：

<input type="text" name="realname" value="輸入的文本內(nèi)容..." 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，都沒有實現(xiàn)我們期望的效果。既然直接實現(xiàn)不了，那么我們可以變通一下，模擬實現(xiàn)。代碼如下：

您可能感興趣的文章: