checkbox設(shè)置復(fù)選框的只讀效果不讓用戶勾選
在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，都沒有實(shí)現(xiàn)我們期望的效果。既然直接實(shí)現(xiàn)不了，那么我們可以變通一下，模擬實(shí)現(xiàn)。代碼如下：
| <input type="checkbox" name="chkAllowed" onclick="return false;" checked="checked" /> |
相關(guān)文章
JavaScript設(shè)計(jì)模型Iterator實(shí)例解析
這篇文章主要介紹了JavaScript設(shè)計(jì)模型Iterator實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了js同源策略,較為詳細(xì)的分析了javascript中同源策略的概念與相關(guān)應(yīng)用注意事項(xiàng),需要的朋友可以參考下2015-05-05
通常在我們的HTML頁面表單中有大量的數(shù)據(jù)驗(yàn)證工作， 免不了要寫很多驗(yàn)證表單的js代碼，這是一項(xiàng)非常繁瑣枯燥的工作。很多程序員也會經(jīng)常遺漏這項(xiàng)工作。所以寫了這一 段JavaScript代碼提供給大家使用。使用起來很簡單，大家拿回去自由擴(kuò)展吧2015-04-04
下面小編就為大家?guī)硪黄猨s獲取所有checkbox值的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這個問題弄了我?guī)滋鞗]心思寫程序，問了論壇很多網(wǎng)友才搞定的。2008-07-07
操作元素定位元素，大家會想到使用js來實(shí)現(xiàn)，下面有個不錯的示例，大家可以看看2014-10-10
淺析JavaScript中l(wèi)et與const命令的區(qū)別
這篇文章主要為大家詳細(xì)介紹了JavaScript中l(wèi)et命令與const命令的用法及區(qū)別,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,需要的可以參考下2023-09-09
詳解使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用
這篇文章主要介紹了詳解使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
JavaScript用document.write()輸出換行的示例代碼
這篇文章主要介紹了JavaScript用document.write()輸出換行的示例代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11
最近有很多朋友問我，為什么點(diǎn)擊彈出的i總是最后一個，于是抽時間寫了這篇文章，特此分享到腳本之家平臺，供大家參考2016-01-01