为什么不在上面用一个空白div覆盖输入呢?

<div id='checkbox_wrap'>
   <div class='click_block'></div>
   <input type='checkbox' /> 
</div>

然后是CSS

 #checkbox_wrap{
   height:10px;
   width:10px;
   }
 .click_block{
   height: 10px;
   width: 10px;
   position: absolute;
   z-index: 100;
}

我知道“disabled”不是一个可接受的答案，因为操作希望它发布。但是，即使设置了只读选项集，也必须在服务器端验证值。这是因为您无法阻止恶意用户使用readonly属性发布值。

我建议存储原始值(服务器端)，并将其设置为禁用。然后，当他们提交表单时，忽略发布的任何值，并使用您存储的原始值。

它的外观和行为都像一个只读值。它处理(忽略)来自恶意用户的帖子。你真是一举两得。

不，但是您可以使用javascript事件来实现类似的功能

<input type="checkbox" onclick="this.checked=!this.checked;">

但你绝对必须验证服务器上的数据，以确保它没有被更改。

在提交表单时，我们实际上传递的是复选框的值，而不是状态(选中/未选中)。只读属性阻止我们编辑值，但不能编辑状态。如果您希望使用一个只读字段来表示要提交的值，请使用只读文本。

基于以上答案，如果使用jQuery，这可能是所有输入的一个很好的解决方案:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

我对Asp使用这个。Net MVC设置一些表单元素为只读。通过将任何父容器设置为.readonly，上述方法适用于文本和复选框，例如以下场景:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>