HTML复选框可以设置为只读吗？

我以为他们可以，但是因为我不把钱放在我的嘴里（可以这么说）设置readonly属性实际上似乎没有做任何事情。

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

#1楼

<input type="checkbox" onclick="return false" />对你<input type="checkbox" onclick="return false" /> ，我正在使用它

#2楼

我用它来实现结果：

<input type=checkbox onclick="return false;" onkeydown="return false;" />

#3楼

这里的一些答案似乎有点迂回，但这是一个小小的黑客。

<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/

#4楼

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

#5楼

另一个“简单解决方案”：

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" />
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

disabled =“disabled”/ disabled = true

#6楼

基于上述答案，如果使用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>

#7楼

READONLY不适用于复选框，因为它会阻止您编辑字段的值，但是使用复选框您实际上正在编辑字段的状态（打开||关闭）

来自faqs.org ：

重要的是要理解，READONLY只是阻止用户更改字段的值，而不是与字段交互。例如，在复选框中，您可以打开或关闭它们（从而设置CHECKED状态），但不要更改字段的值。

如果您不想使用已disabled但仍想提交值，那么如果将值作为隐藏字段提交并仅在不符合编辑条件时将其内容打印给用户呢？例如

// user allowed change
if($user_allowed_edit)
{echo '<input type="checkbox" name="my_check"> Check value';
}
else
{// Not allowed change - submit value..echo '<input type="hidden" name="my_check" value="1" />';// .. and show user the value being submittedecho '<input type="checkbox" disabled readonly> Check value';
}

#8楼

我只是不希望客户端在某些情况下能够更改它们。

READONLY本身不起作用。你可以用CSS做一些时髦的东西，但我们通常只是禁用它们。

警告：如果他们被回发，那么客户可以更改它们，期限。您不能依赖readonly来阻止用户更改某些内容。总是可以使用提琴手或只是使用firebug或其他类似的东西。

#9楼

这是一个您无法更改的复选框：

<input type="checkbox" disabled="disabled" checked="checked">

只需添加disabled="disabled"作为属性即可。

编辑以解决评论：

如果您希望回发数据，那么简单的解决方案是将相同的名称应用于隐藏的输入：

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

这样，当复选框设置为“禁用”时，它仅用于数据的可视化表示，而不是实际“链接”到数据。在回发中，当禁用复选框时，将发送隐藏输入的值。

#10楼

这提出了一些可用性问题。

如果您想显示一个复选框，但不想让它与之互动，为什么即使是一个复选框呢？

但是，我的方法是使用disabled（用户希望禁用复选框不可编辑，而不是使用JS使启用的不可用），并使用javascript添加表单提交处理程序，在表单之前启用复选框提交。通过这种方式，您可以发布您的值。

即是这样的：

var form = document.getElementById('yourform');
form.onSubmit = function ()
{ var formElems = document.getElementsByTagName('INPUT');for (var i = 0; i , formElems.length; i++){  if (formElems[i].type == 'checkbox'){ formElems[i].disabled = false;}}
}

#11楼

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

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

#12楼

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

#13楼

我碰巧注意到下面给出的解决方案。发现它是我对同一问题的研究。我不是谁发布它但它不是由我制作的。它使用jQuery：

$(document).ready(function() {$(":checkbox").bind("click", false);
});

这将使复选框只读，这将有助于向客户端显示只读数据。

#14楼

派对很晚但我找到了MVC的答案（5）我禁用了CheckBox并在复选框之前添加了一个HiddenFor，所以当它发布时如果首先找到隐藏字段并使用该值。这确实有效。

 <div class="form-group">@Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.HiddenFor(model => model.Carrier.Exists)@Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })@Html.ValidationMessageFor(model => model.Carrier.Exists)</div></div>

#15楼

我会对ConroyP的答案发表评论，但这需要50个我没有的声誉。我有足够的声誉来发布另一个答案。抱歉。

ConroyP答案的问题在于，即使在页面上不包含复选框，也会使复选框无法更改。虽然Electrons_Ahoy没有规定那么多，但最好的答案是不可更改的复选框看起来与可更改的复选框相似，如同应用“禁用”属性的情况一样。一个解决方案，解决了两方面的原因Electrons_Ahoy给出了不想要使用“残疾”的属性不一定是无效的，因为它使用的“已禁用”属性。

假设有两个布尔变量，$ checked和$ disabled：

if ($checked && $disabled)echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',$checked ? 'checked="checked" ' : '',$disabled ? 'disabled="disabled" ' : '', '/>';

如果$ checked为true，则复选框显示为已选中。如果$ checked为false，则复选框显示为未选中。当且仅当$ disabled为false时，用户才能更改复选框的状态。如果未选中该复选框，则不会发布“my_name”参数。当用户选中复选框时，将发布“my_name = 1”参数。我相信这就是Electrons_Ahoy所期待的。

#16楼

我的解决方案实际上与FlySwat的解决方案相反，但我不确定它是否适用于您的情况。我有一组复选框，每个复选框都有一个提交表单的onClick处理程序（它们用于更改表的过滤器设置）。我不想允许多次点击，因为忽略了第一次点击之后的后续点击。所以我在第一次点击后禁用所有复选框，并在提交表单后：

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

复选框位于一个ID为“filters”的span元素中 - 代码的第二部分是一个jQuery语句，它遍历复选框并禁用每个复选框。这样，复选框值仍然通过表单提交（因为表单在禁用之前已提交），并且它阻止用户更改它们直到页面重新加载。

#17楼

我知道“残疾人”不是一个可接受的答案，因为操作系统希望它发布。但是，如果设置了readonly选项，则总是必须在服务器端验证值。这是因为您无法阻止恶意用户使用readonly属性发布值。

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

它看起来和行为都像是一个只读的价值。它处理（忽略）恶意用户的帖子。你一石二鸟。

#18楼

<input type="checkbox" readonly="readonly" name="..." />

用jquery：

$(':checkbox[readonly]').click(function(){return false;});

提供一些视觉提示（css，text，...）仍然是一个好主意，控件不会接受输入。

#19楼

onclick="javascript: return false;"

#20楼

人们希望只读复选框和（以及）只读无线电组的主要原因是，无法更改的信息可以以输入的形式呈现给用户。

OK禁用将执行此操作 - 遗憾的是，禁用的控件不能通过键盘导航，因此违反所有可访问性法规。这是我所知道的HTML中最大的挂断。

#21楼

不，输入复选框不能只读。

但你可以使用javascript使它们只读！

随时随地添加此代码，通过阻止用户以任何方式修改它，使复选框readonly按预期工作。

 jQuery(document).on('click', function(e){ // check for type, avoid selecting the element for performance if(e.target.type == 'checkbox') { var el = jQuery(e.target); if(el.prop('readonly')) { // prevent it from changing state e.preventDefault(); } } });

 input[type=checkbox][readonly] { cursor: not-allowed; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label><input type="checkbox" checked readonly> I'm readonly!</label>

您可以在加载jQuery后随时添加此脚本。

它适用于动态添加的元素。

它的工作原理是在页面上的任何元素上拾取click事件（在更改事件之前发生），然后检查此元素是否为readonly复选框，如果是，则阻止更改。

有太多的ifs使它不影响页面的性能。

#22楼

只需使用如下所示的简单禁用标记。

<input type="checkbox" name="email"  disabled>

#23楼

如果您希望所有复选框都“锁定”，那么如果“readonly”attibute存在，则用户无法更改“已检查”状态，那么您可以使用jQuery：

$(':checkbox').click(function () {if (typeof ($(this).attr('readonly')) != "undefined") {return false;}
});

关于此代码的一个很酷的事情是，它允许您在代码中更改“readonly”属性，而无需重新绑定每个复选框。

它也适用于单选按钮。

#24楼

贡献非常晚......但无论如何。在页面加载时，使用jquery禁用除当前所选复选框之外的所有复选框。然后将当前选定的一个设置为只读，以使其具有与禁用的外观相似的外观。用户无法更改该值，并且仍会提交所选值。

#25楼

如果您希望将它们提交到具有表单的服务器但不能与用户交互，则可以在css中使用pointer-events: none （适用于除IE10-和Opera 12-之外的所有现代浏览器）并将tab-index设置为-1以防止通过键盘更改。另请注意，您不能使用label标签，因为单击它会改变状态。

 input[type="checkbox"][readonly] { pointer-events: none !important; } td { min-width: 5em; text-align: center; } td:last-child { text-align: left; }

 <table> <tr> <th>usual <th>readonly <th>disabled </tr><tr> <td><input type=checkbox /> <td><input type=checkbox readonly tabindex=-1 /> <td><input type=checkbox disabled /> <td>works </tr><tr> <td><input type=checkbox checked /> <td><input type=checkbox readonly checked tabindex=-1 /> <td><input type=checkbox disabled checked /> <td>also works </tr><tr> <td><label><input type=checkbox checked /></label> <td><label><input type=checkbox readonly checked tabindex=-1 /></label> <td><label><input type=checkbox disabled checked /></label> <td>broken - don't use label tag </tr> </table>

#26楼

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

据我了解，OP基本上是想要的：

Readonly复选框以显示状态。
表格返回的值。

应当指出的是：

OP首选不使用disabled属性，因为他们“希望选中的复选框与表单的其余部分一起提交”。
未选中的复选框不会随表单一起提交，因为上面的OP中的引用表明他们已经知道。基本上，复选框的值仅在选中时才存在。
禁用的复选框清楚地表明它无法通过设计进行更改，因此用户不太可能尝试更改它。
复选框的值并不限于指示其状态，比如yes或false ，但也可以是任何文字。

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

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

因此，对于选中的复选框：

 <input type="checkbox" checked="checked" disabled="disabled" /> <input type="hidden" name="fieldname" value="fieldvalue" />

对于未选中的复选框：

 <input type="checkbox" disabled="disabled" />

禁用输入的主要问题，特别是复选框，是它们的对比度差，对于某些具有某些视觉障碍的人来说可能是一个问题。最好通过简单的单词来表示值，例如Status: none或Status: implemented ，但在使用后者时包括上面的隐藏输入，例如：

 <p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

#27楼

你可以用这个：

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

这是有效的，因为从click事件返回false会停止执行链继续。

#28楼

向服务器发布HTML复选框时，其字符串值为“on”或“”。

Readonly不会停止用户编辑复选框，并且禁用会停止回发的值。
解决此问题的一种方法是使用隐藏元素来存储实际值，并且显示的复选框是禁用的虚拟对象。这样，复选框状态在帖子之间保持不变。

这是一个执行此操作的功能。它使用“T”或“F”字符串，您可以按照自己喜欢的方式进行更改。这已在使用服务器端VB脚本的ASP页面中使用。

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)dim strThisCheckedValueif (i_strChecked_TorF = "T") thenstrThisCheckedValue = " checked "i_strChecked_TorF = "on"elsestrThisCheckedValue = ""i_strChecked_TorF = ""end ifMakeDummyReadonlyCheckbox = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _"value='" & i_strChecked_TorF & "'>" & _"<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _strThisCheckedValue & ">"
end functionpublic function GetCheckbox(i_objCheckbox)select case trim(i_objCheckbox)case ""GetCheckbox = "F"case elseGetCheckbox = "T"end selectend function

在ASP页面的顶部，您可以获取持久值...

strDataValue = GetCheckbox(Request.Form("chkTest"))

当你想输出你的复选框时，你可以这样做......

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

我测试了这个，它工作得很好。它也不依赖于JavaScript。

#29楼

另一种想法是使用叠加层并掩盖您的只读输入

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

#30楼

提交表单时，我们实际传递复选框的值，而不是状态（已选中/未选中）。 Readonly属性阻止我们编辑值，但不会编辑状态。如果您想要一个只读字段来表示您要提交的值，请使用只读文本。