在Web開發(fā)中，有時(shí)候需要顯示一些復(fù)選框（checkbox），表明這個(gè)地方是可以進(jìn)行勾選操作的，但是有時(shí)候是只想告知用戶"這個(gè)地方是可以進(jìn)行勾選操作的"而不想讓用戶在此處勾選（比如在信息展示頁面），這時(shí)候就需要將復(fù)選框設(shè)置成只讀的效果。
提到只讀，很容易想到使用readonly屬性，但是對(duì)于復(fù)選框來說，這個(gè)屬性和期望得到的效果是有差別的。原因在于readonly屬性關(guān)聯(lián)的是頁面元素的value屬性（例如textbox，設(shè)置了readonly就不能修改輸入框的文本內(nèi)容），而復(fù)選框的勾選/取消并不改變其value屬性，改變的只是一個(gè)checked狀態(tài)。所以對(duì)于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類似的，還有一個(gè)disabled屬性，這個(gè)屬性的作用是設(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，都沒有實(shí)現(xiàn)我們期望的效果。既然直接實(shí)現(xiàn)不了，那么我們可以變通一下，模擬實(shí)現(xiàn)。代碼如下：
| <input type="checkbox" name="chkAllowed" onclick="return false;" checked="checked" /> |
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
