checkbox設(shè)置復(fù)選框的只讀效果不讓用戶勾選
在Web開發(fā)中，有時(shí)候需要顯示一些復(fù)選框（checkbox），表明這個(gè)地方是可以進(jìn)行勾選操作的，但是有時(shí)候是只想告知用戶"這個(gè)地方是可以進(jìn)行勾選操作的"而不想讓用戶在此處勾選（比如在信息展示頁(yè)面），這時(shí)候就需要將復(fù)選框設(shè)置成只讀的效果。
提到只讀，很容易想到使用readonly屬性，但是對(duì)于復(fù)選框來(lái)說(shuō)，這個(gè)屬性和期望得到的效果是有差別的。原因在于readonly屬性關(guān)聯(lián)的是頁(yè)面元素的value屬性（例如textbox，設(shè)置了readonly就不能修改輸入框的文本內(nèi)容），而復(fù)選框的勾選/取消并不改變其value屬性，改變的只是一個(gè)checked狀態(tài)。所以對(duì)于checkbox來(lái)說(shuō)，設(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è)置頁(yè)面元素為不可用，即不可進(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 |
從上面我們可以看到，無(wú)論是readonly還是disabled，都沒(méi)有實(shí)現(xiàn)我們期望的效果。既然直接實(shí)現(xiàn)不了，那么我們可以變通一下，模擬實(shí)現(xiàn)。代碼如下：
| <input type="checkbox" name="chkAllowed" onclick="return false;" checked="checked" /> |
相關(guān)文章
這篇文章詳細(xì)介紹了js兼容的placeholder屬性，有需要的朋友可以參考一下2013-08-08
javascript自動(dòng)改變文字大小和顏色的效果的小例子
這篇文章介紹了javascript自動(dòng)改變文字大小和顏色的效果的小例子，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了微信小程序之左右布局的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這是一個(gè)非常有趣的題目。我們先從Object.prototype.toString入手，看能否解決它。2010-02-02
錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)
錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)...2007-08-08
JavaScript組合模式學(xué)習(xí)要點(diǎn)
組合模式大概是設(shè)計(jì)模式里面使用最為廣泛的模式之一了，模式本身理解起來(lái)也比較簡(jiǎn)單，以至于可以毫不費(fèi)力的寫出一個(gè)能用的組合模式偽代碼2016-08-08
JS實(shí)現(xiàn)jQuery的append功能
jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過(guò)查找資料, 封裝一個(gè)可以實(shí)現(xiàn)同樣效果的方法.2021-05-05
這篇文章主要介紹了在webstorm中配置less的方法，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
理解this之前,先糾正一個(gè)觀點(diǎn),this?既不指向函數(shù)自身,也不指函數(shù)的詞法作用域,下面這篇文章主要給大家介紹了關(guān)于JavaScript之this指向的相關(guān)資料,需要的朋友可以參考下2022-05-05
解析JavaScript中的不可見數(shù)據(jù)類型
這篇文章主要是對(duì)JavaScript中的不可見數(shù)據(jù)類型進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12