Question

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

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

Answer 1

你可以用这个：

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

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

Answer 2

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

来自faqs.org：

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

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

// 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 submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

Answer 3

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

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

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

Answer 4

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

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

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

禁用=“禁用”/禁用= true

Answer 6

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

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

但是，我的方法是使用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;
       }
    }
}

Answer 7

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

使用jquery：

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

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

Answer 8

我用它来实现结果：

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

Answer 9

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

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

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

Answer 10

onclick="javascript: return false;"

Answer 11

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

Answer 12

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

Answer 13

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

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

Answer 14

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

Answer 15

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

Answer 16

我会对ConroyP的回答发表评论，但这需要50个我不具备的声誉。我有足够的声誉来发布另一个答案。遗憾。

ConroyP答案的问题在于，即使在页面上不包含复选框，也会使复选框无法更改。虽然Electrons_Ahoy没有规定那么多，但最好的答案是不可更改的复选框看起来与可更改的复选框相似（如果不相同），就像＆＃34;禁用＆＃34;属性已应用。一个解决方案，解决了Electrons_Ahoy给出的两个原因，即不想使用＆＃34;禁用＆＃34;属性 not 必然是无效的，因为它使用了＆＃34;禁用＆＃34;属性。

假设有两个布尔变量，$ 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时，用户才能更改复选框的状态。＆＃34; my_name＆＃34;如果未选中该复选框，则不会发布参数。＆＃34; my_name = 1＆＃34;用户是否在选中复选框时发布参数。我相信这就是Electrons_Ahoy所期待的。

Answer 17

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

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

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

Answer 18

只需使用下面的简单禁用标签即可。

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

Answer 19

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

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

此代码很酷，它使您可以在代码中更改“只读”属性，而不必重新绑定每个复选框。

它也适用于单选按钮。

Answer 20

如果您希望它们以表单形式提交到服务器，但不与用户互动，则可以在CSS（works in all modern browsers except IE10- and 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>

Answer 21

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

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

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

这种方式在提交表单时会从元素中删除禁用的属性。

Answer 22

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

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

Answer 23

当前答案中的大多数都存在以下一个或多个问题：

仅检查鼠标而不是键盘。
仅在页面加载时检查。
进行流行的更改或提交事件，如果发生其他事件，这些事件将永远无法解决。
需要隐藏的输入或其他必须撤消的特殊元素/属性，才能使用javascript重新启用复选框。

以下内容很简单，没有任何问题。

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

如果该复选框为只读，则不会更改。如果不是，它将。它确实使用了jquery，但您可能已经在使用它了……

有效。

Answer 24

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

但是您可以使用javascript将它们设置为只读！

通过防止用户以任何方式对其进行修改，可以随时随地在任何地方添加此代码，以使复选框以只读方式工作。

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事件（发生在change事件之前），然后检查该元素是否为只读复选框，如果是，则阻止更改。

要想让它不影响页面性能的方法太多了。

Answer 25

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

Answer 26

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

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

Answer 27

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

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

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

Answer 28

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

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

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

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        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 else
            GetCheckbox = "T"

    end select

end function

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

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

当您想要输出复选框时，您可以执行此操作...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

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

Answer 29

如果您需要将复选框与表单一起提交但对用户有效，我建议将其设置为禁用，并在提交表单时使用javascript重新启用它们。

这有两个原因。首先也是最重要的是，您的用户可以看到他们可以更改的复选框和只读的复选框之间的明显区别。禁用就是这样。

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

在提交表单以取消禁用复选框时，使用某些javascript似乎比使用隐藏输入来传输值更容易。

Answer 30

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

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

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

Answer 31

聚会很晚但我找到了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>

Answer 32

我会使用readonly属性

<input type="checkbox" readonly>

然后使用CSS禁用交互：

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

请注意，使用伪类：read-only在这里不起作用。

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

Answer 33

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

Answer 34

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

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

Answer 35

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

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

只读复选框以显示状态。
通过表单返回的值。

应注意：

OP最好不要使用disabled属性，因为它们“希望选中的复选框与表单的其余部分一起提交”。
未选中的复选框未与表单一起提交，因为上述1中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，但是在使用后者时，请在上方包含隐藏的输入，例如：

<input type="hidden" name="status" value="implemented" />

Answer 36

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

Answer 37

或者只是：

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

Answer 38

在旧的HTML中，您可以使用

<input type="checkbox" disabled checked>text

但实际上不建议只使用旧的HTML，现在你应该使用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格式，这就是使用disabled =“disabled”而不是简单地使用disabled的原因。

Answer 39

最新的jQuery具有此功能

npm test

Answer 40

最简单（在我看来）：

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

Answer 41

为什么不在顶部用空白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;
}

Answer 42

您可以随时使用看起来像复选框的小图片。

Answer 43

您在这里没有想到的是您使用的是JavaScript，任何用户都可以轻松绕过它。

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

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

显示它们，让它们更改它们但不接受它们的新发布数据。

Answer 44

尝试使此复选框为只读，但禁止用户检查。这将允许您POST复选框值。您需要选中复选框的默认状态为Checked才能执行此操作。

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

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

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

希望有所帮助。

Answer 45

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

Answer 46

这将有效

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

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

46 个答案: