我认为他们可以,但我没有把我的钱放在我的嘴(这么说)设置只读属性实际上似乎没有做任何事情。

我宁愿不使用Disabled,因为我希望选中的复选框与表单的其余部分一起提交,我只是不希望客户端能够在某些情况下更改它们。


当前回答

这里的一些答案似乎有点迂回,但这里有一个小技巧。

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

然后在jquery中,你可以选择以下两个选项之一:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

演示: http://jsfiddle.net/5WFYt/

其他回答

迟来的回答,但大多数答案似乎过于复杂了。

据我所知,OP的基本要求是:

只读复选框显示状态。 随form返回的值。

应当指出的是:

The OP preferred not to use the disabled attribute, because they 'want the checked check boxes to be submitted with the rest of the form'. Unchecked checkboxes are not submitted with the form, as the quote from the OP in 1. above indicates they knew already. Basically, the value of the checkbox only exists if it is checked. A disabled checkbox clearly indicates that it cannot be changed, by design, so a user is unlikely to attempt to change it. The value of a checkbox is not limited to indicating its status, such as yes or false, but can be any text.

因此,由于readonly属性不起作用,不需要javascript的最佳解决方案是:

禁用的复选框,没有名称或值。 如果复选框要显示为已选中,则会显示存储在服务器上的具有名称和值的隐藏字段。

对于选中的复选框:

<输入类型=“复选框” 选中=“选中” 禁用=“禁用” /> <输入类型=“隐藏” 名称=“字段名称” 值=“字段值” />

对于未选中的复选框:

<输入类型=“复选框”禁用=“禁用” />

禁用输入的主要问题,特别是复选框,是它们的对比度差,这可能是一些视觉障碍的问题。用简单的词来表示值可能会更好,比如Status: none或Status: implemented,但在使用后者时包含上面的隐藏输入,比如:

<p>状态:执行<输入类型=“隐藏”

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

@ (Model.IsEnabled) 使用此条件进行动态检查和取消检查,如果复选框已选中,则设置为只读。

 <input id="abc" name="abc"  type="checkbox" @(Model.IsEnabled ? "checked=checked onclick=this.checked=!this.checked;" : string.Empty) >

为什么不在上面用一个空白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;
}
onclick="javascript: return false;"