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

我以为可以，但是由于我没有把钱花在嘴上（可以这么说），设置readonly属性实际上并没有任何作用。

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

您可以使用此：

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

之所以可行，是因为单击事件返回false会停止执行链。

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

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

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

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

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

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

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

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

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

这带来了一些可用性问题。

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

但是，我的方法是使用禁用的（用户希望禁用的复选框不可编辑，而不是使用JS来使已启用的复选框不起作用），并使用JavaScript来添加表单提交处理程序，该处理程序会在表单开始之前使用启用复选框的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" readonly="readonly" name="..." />

使用jQuery：

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

给出一些视觉提示（css，文本等）仍然是一个好主意，该控件将不接受输入。

我用它来达到结果：

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

我碰巧注意到下面给出的解决方案。发现它是我针对同一问题的研究。我不是谁张贴的，但不是我做的。它使用jQuery：

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

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

onclick="javascript: return false;"

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

据我了解，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" />

禁用输入（尤其是复选框）的主要问题是对比度差，这对于某些视力障碍的人可能是个问题。最好使用纯文字（例如Status: none或）来指示值Status: implemented，但是在使用后者时，请在上方包含隐藏的输入，例如：

<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 name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

如果您希望将它们以表单形式提交到服务器，但对用户不友好，则可以pointer-events: none在CSS中使用（在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>

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

这里的一些答案似乎有些round回，但这是一个小技巧。

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

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

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

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

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

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

我会在ConroyP的答案上发表评论，但这需要50个我没有的声誉。我确实有足够的声誉可以发布另一个答案。抱歉。

ConroyP答案的问题在于，即使未在页面上包含复选框，该复选框也无法更改。尽管Electrons_Ahoy的规定不多，但是最好的答案将是这样的：与应用“ disabled”属性时一样，不可更改的复选框看起来将与可更改的复选框相似（如果不相同）。一个解决方案既解决了两方面的原因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所寻找的。

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

但是您可以使用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事件之前）来工作，然后检查该元素是否为只读复选框，如果是，则阻止更改。

有太多的假设使它不会影响页面的性能。

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

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

一个替代的想法是使用覆盖并掩盖您的只读输入

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

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

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

这段代码的妙处在于，它允许您在整个代码中更改“只读”属性，而不必重新绑定每个复选框。

它也适用于单选按钮。

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

确定禁用将执行此操作-不幸的是，禁用的控件无法通过键盘导航，因此会违反所有辅助功能法规。这是我所知道的最大的HTML挂断。

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

参加聚会的时间很晚，但是我找到了MVC的答案（5）我禁用了复选框，并在复选框之前添加了HiddenFor，因此在发布时，如果首先找到Hidden字段并使用该值。这确实有效。

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

我会使用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;
}

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

READONLY本身不起作用。使用CSS，您可以执行一些时髦的操作，但是我们通常只是将其禁用。

警告：如果将它们重新发布，则客户可以更改期限。您不能依靠只读来阻止用户更改某些内容。可以始终使用提琴手，也可以仅使用带有萤火虫的html之类的东西。

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

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

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