超文本标记语言复选框可以设置为只读吗？

READONLY在复选框上不起作用，因为它阻止您编辑字段的值，但使用复选框，您实际上是在编辑字段的州（开|关）

从faqs.org：

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

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

// user allowed changeif($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';}

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

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

READONLY本身不会工作。您可能可以使用CSS做一些时髦的事情，但我们通常只是将它们禁用。

警告：如果它们被发布回来，那么客户端可以更改它们，时期。您不能依靠readOnly来阻止用户更改某些内容。他们可以始终使用fiddler或仅使用带有Firebug的html或类似的东西。

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

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

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

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

如果您想显示一个复选框，但不让它与之交互，那么为什么还要使用复选框呢？

但是，我的方法是使用禁用（用户期望禁用的复选框不可编辑，而不是使用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;}}}

您可以始终使用看起来像复选框的小图像。

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

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

将超文本标记语言复选框发布到服务器时，它的字符串值为'on'或"。

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

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

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)
dim strThisCheckedValue
if (i_strChecked_TorF = "T") thenstrThisCheckedValue = " checked "i_strChecked_TorF = "on"elsestrThisCheckedValue = ""i_strChecked_TorF = ""end if
MakeDummyReadonlyCheckbox = "<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 function
public function GetCheckbox(i_objCheckbox)
select case trim(i_objCheckbox)
case ""GetCheckbox = "F"
case elseGetCheckbox = "T"
end select
end function

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

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

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

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

我已经测试过了，它运行得很好。它也不依赖JavaScript。

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

如果您需要与表单一起提交复选框，但对用户来说实际上是只读的，我建议将它们设置为禁用并使用javascript在提交表单时重新启用它们。

这有两个原因。首先也是最重要的，您的用户可以从他们可以更改的复选框和只读的复选框之间的明显差异中受益。禁用这样做。

第二个原因是浏览器内置了禁用状态，因此当用户单击某些内容时，您需要更少的代码来执行。这可能更多地是个人偏好而不是其他任何东西。提交表单时，您仍然需要一些javascript来取消禁用这些。

对我来说，在表单提交时使用一些javascript来取消禁用复选框似乎比使用隐藏的输入来携带值更容易。

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

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

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

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

使用jQuery：

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

提供一些视觉提示（css、text…），说明控件不接受输入可能仍然是个好主意。

onclick="javascript: return false;"

最简单的（在我看来）：

onclick="javascript:{this.checked = this.defaultChecked;}"

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

好的，禁用的将这样做-不幸的是，禁用的控件不能在键盘上导航，因此违反了所有可访问性法规。这是我所知道的超文本标记语言中最大的挂断。

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

在旧的超文本标记语言中，您可以使用

<input type="checkbox" disabled checked>text

但实际上不建议只使用简单的旧超文本标记语言，现在应该使用XHTML。

在格式良好的XHTML中，您必须使用

<input type="checkbox" disabled="disabled" checked="checked" />text <!-- if yu have a checked box--><input type="checkbox" disabled="disabled" />text <!-- if you have a unchecked box -->

格式良好的XHTML需要一个XML表单，这就是为什么我们要使用禁用="禁用"而不是简单地使用禁用。

你可以使用这个：

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

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

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

尝试此操作以使复选框只读但不允许用户选中。这将允许您发布复选框值。您需要将复选框的默认状态选择为已选中才能这样做。

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

如果您想要上述功能+不想接收复选框数据，请尝试以下操作：

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

希望有帮助。

<input type="checkbox" onclick="return false" />将为你工作，我正在使用这个

如果您知道始终选中复选框，则以下操作有效：

<input type="checkbox" name="Name" checked onchange='this.checked = true;'>

我用它来实现结果：

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

你们在这里没有想到的是，你们都在使用JavaScript，任何用户都可以很容易地绕过它。

简单地禁用它会禁用所有JQuery/Back False语句。

只读复选框的唯一选项是服务器端。

显示它们，让他们更改它们，但不接受他们的新帖子数据。

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

<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();});
});

demo：http://jsfiddle.net/5WFYt/

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

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

禁用="禁用"/禁用=true

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

如果其他人使用MVC和编辑器模板，这就是我控制显示只读属性的方式（我使用自定义属性来获取if语句中的值）

@if (true){@Html.HiddenFor(m => m)@(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No"))}else{@Html.CheckBoxFor(m => m)}

或者只是：

$('your selector').click(function(evt){evt.preventDefault()});

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

我碰巧注意到下面给出的解决方案。在找到我对同一问题的研究。我不知道是谁发布的，但它不是我做的。它使用jQuery：

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

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

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

为什么不在输入顶部覆盖一个空白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;}

派对很晚了，但我找到了MVC的答案（5）我禁用了复选框并在复选框之前添加了一个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>

我本想对ConRoyP的回答发表评论，但这需要50个声誉，而我没有。我确实有足够的声誉来发布另一个答案。对不起。

ConRoyP的回答的问题在于，复选框甚至不包含在页面上，从而变得不可更改。尽管Electrons_Ahoy没有规定那么多，但最好的答案是，不可更改的复选框看起来与可更改的复选框相似，如果不是相同的话，就像应用“禁用”属性时的情况一样。解决Electrons_Ahoy不想使用“禁用”属性的两个原因的解决方案没有必然是无效的，因为它使用了“禁用”属性。

假设有两个布尔变量，$检查和$禁用：

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" ' : '', '/>';

如果选中$为true，则复选框显示为选中。如果选中$为false，则复选框显示为未选中。当且仅当禁用$为false时，用户可以更改复选框的状态。“my_name”参数在复选框未选中时不会被发布，无论用户是否选中。“my_name=1”参数在复选框被选中时发布，无论用户是否选中。我相信这就是Electrons_Ahoy要找的。

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

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

它的外观和行为就像一个只读值。它处理（忽略）来自恶意用户的帖子。你正在用一块石头杀死两只鸟。

最新的jQuery有这个功能

$("#txtname").prop('readonly', false);

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

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

随时随地添加此代码，通过防止用户以任何方式修改它，使复选框按假设只读工作。

jQuery(document).on('click', function(e){// check for type, avoid selecting the element for performanceif(e.target.type == 'checkbox') {var el = jQuery(e.target);if(el.prop('readonly')) {// prevent it from changing statee.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后随时添加此脚本。

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

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

有这么多的ifs，使其不会影响页面的性能。

只需像下面这样使用简单的禁用标签。

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

如果您希望所有复选框都被“锁定”，以便用户在存在“只读”时无法更改“已选中”状态，那么您可以使用jQuery：

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

这段代码很酷的一点是，它允许您在代码中更改“只读”属性，而无需重新绑定每个复选框。

它也适用于单选按钮。

如果您希望它们以表单形式提交给服务器，但对用户来说不是Interacive，您可以在css（适用于除IE10和Opera 12-之外的所有现代浏览器）中使用pointer-events: none并将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>

我会使用只读属性

<input type="checkbox" readonly>

然后使用CSS禁用交互：

input[type='checkbox'][readonly]{pointer-events: none;}

请注意，使用伪类：只读在这里不起作用。

input[type='checkbox']:read-only{ /*not working*/pointer-events: none;}

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

据我所知，OP基本上想要：

1. 只读复选框以显示状态。
2. 值返回与形式。

应当指出的是：

1. OP不希望使用disabled属性，因为他们“希望选中的复选框与表单的其余部分一起提交”。
2. 未选中的复选框不会与表单一起提交，因为上面1.中OP的引用表明他们已经知道了。基本上，复选框的值只有在被选中时才存在。
3. 禁用的复选框清楚地表明它在设计上无法更改，因此用户不太可能尝试更改它。
4. 复选框的值不限于指示其状态，例如yes或false，而是可以是任何文本。

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

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

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

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

对于未选中的复选框：

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

The main problem with disabled inputs, especially checkboxes, is their poor contrast which may be a problem for some with certain visual disabilities. It may be better to indicate a value by plain words, such as Status: none or Status: implemented, but including the hidden input above when the latter is used, such as:

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

目前大多数答案都有以下一个或多个问题：

1. 只检查鼠标而不是键盘。
2. 仅在页面加载时检查。
3. 钩住一直流行的更改或提交事件，如果其他东西让他们上钩，这些事件并不总是有效。
4. 需要隐藏的输入或其他必须撤消的特殊元素/属性，以便使用javascript重新启用复选框。

以下是简单的，没有这些问题。

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {if($(this).is('[readonly]')) { return false; }});

如果复选框是只读的，它不会改变。如果不是，它会。它确实使用jQuery，但你可能已经在使用它了…

它奏效了。

@（模型已启用）如果复选框已选中，则使用此条件动态选中和取消选中并设置只读。

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

readonly不适用于<input type='checkbox'>

因此，如果您需要在表单中从禁用的复选框中提交值，您可以使用jQuery：

$('form').submit(function(e) {$('input[type="checkbox"]:disabled').each(function(e) {$(this).removeAttr('disabled');})});

这样，在提交表单时，禁用的属性将从元素中删除。

摘自https://stackoverflow.com/a/71086058/18183749

如果您不能使用“禁用”attribut（因为它会擦除值的值输入在POST），并注意到html attribut'readOnly'只工作关于文本区域和一些输入（文本、密码、搜索，据我所知），最后，如果你不想费心复制你所有的选择，复选框和单选隐藏的输入逻辑，你可能会发现下面的函数或任何你喜欢的内部逻辑：

    addReadOnlyToFormElements = function (idElement) {        
// html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items$('#' + idElement + ' input[type="checkbox"]:not(:checked)').prop('disabled',true);     
// and, on the selected ones, to disable mouse/keyoard events and mimic readOnly appearance$('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','-1').css('pointer-events','none').css('opacity','0.5');}

没有什么比删除这些只读更容易的了

removeReadOnlyFromFormElements = function (idElement) {
// Remove the disabled attribut on non-selected$('#' + idElement + ' input[type="checkbox"]:not(:checked)').prop('disabled',false);
// Restore mouse/keyboard events and remove readOnly appearance on selected ones$('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','').css('pointer-events','').css('opacity','');}

这适用于我Chrome：

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