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

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

　　和readonly類似的，還有一個disabled屬性，這個屬性的作用是設置頁面元素為不可用，即不可進行任何交互操作（包括不可修改value屬性、不可修改checked狀態等）。但是問題也來了，就是它也不能向后臺傳遞數據了。因為disabled屬性使復選框完全失效了，不能用于頁面交互，也不能修改value、checked的值了

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

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

　　主要通過設置onclick事件，來控制checked值 ，使其值變化失效，以此實現CheckBox的只讀設置。也可使用下面設置：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。