在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，仍然是可以勾選/取消的。

　　和readonly類似的，還有一個(gè)disabled屬性，這個(gè)屬性的作用是設(shè)置頁(yè)面元素為不可用，即不可進(jìn)行任何交互操作（包括不可修改value屬性、不可修改checked狀態(tài)等）。但是問題也來(lái)了，就是它也不能向后臺(tái)傳遞數(shù)據(jù)了。因?yàn)?code>disabled屬性使復(fù)選框完全失效了，不能用于頁(yè)面交互，也不能修改value、checked的值了

　　但是，無(wú)論是readonly還是disabled，都沒有實(shí)現(xiàn)我們期望的效果。既然直接實(shí)現(xiàn)不了，那么我們可以變通一下，模擬實(shí)現(xiàn)。代碼如下：

<input type="checkbox" name="chkAllowed" onclick="return false;" checked="checked" />

　　主要通過設(shè)置onclick事件，來(lái)控制checked值 ，使其值變化失效，以此實(shí)現(xiàn)CheckBox的只讀設(shè)置。也可使用下面設(shè)置：

<script language="javascript"> 
    $(function(){ 
        $("input[type='checkbox']").click(function(){ 
            this.checked = !this.checked; 
        }); 
    }); 
</script> 

總結(jié)

以上是生活随笔為你收集整理的如何设置复选框只读的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。