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

【问题标题】：Can HTML checkboxes be set to readonly?HTML复选框可以设置为只读吗？
【发布时间】：2010-09-14 09:26:32
【问题描述】：

我认为它们可以，但由于我没有把钱放在嘴边（可以这么说），因此设置 readonly 属性实际上似乎没有任何作用。

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

【问题讨论】：

（恶意）客户端始终可以更改复选框的值（或发送任意请求）。始终确保进行正确的服务器端验证！
@knittl 但是普通访客没有（恶意）客户。而一个普通的Vistor不想改变一个信息（那是readonly的意思）
@knittl 你似乎忽略了readonly 的全部意义！为什么会存在这个属性！
@IzharAazmi：readonly 只是一个客户端属性，可帮助浏览器正确呈现站点，然后从中构造正确的请求。服务器不能也不应该知道渲染页面的readonly 属性。它必须假设请求来自任何地方（并且可能带有恶意）；永远不要依赖用户提供的输入。不过，为什么要在请求中发送您无法编辑的复选框值（如果您在渲染之前设置了该值，那么您在提交请求时已经知道该值，因此无需在请求中传输它）
@knittl 我同意！但是您会看到 readonly 属性由于某种原因存在那里。它当然与服务器端实现无关。但它可以告诉用户“嘿！这里假设了这个值，和/但你不能改变这个。”

【解决方案1】：

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

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

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

【讨论】：

该问题要求只读复选框，而不是禁用的复选框。所以这是最正确的答案。

【解决方案2】：

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

【讨论】：

OP 不想使用“禁用”
此输入不会包含在表单数据中

【解决方案3】：

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

【讨论】：

这是不合适的，难以维护。 disabled="disabled" 是干净的解决方案

【解决方案4】：

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

【讨论】：

【解决方案5】：

我会评论 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 为真，则复选框显示为已选中。如果 $checked 为 false，则复选框显示为未选中。当且仅当 $disabled 为 false 时，用户才能更改复选框的状态。当复选框未选中时，无论用户是否选中，都不会发布“my_name”参数。 “my_name=1”参数在复选框被选中时发布，无论用户是否选中。我相信这就是 Electrons_Ahoy 所寻找的。p>

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

最新的jQuery有这个功能

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

【讨论】：

【解决方案8】：

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

但是您可以使用 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 加载后随时添加此脚本。

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

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

为了不影响页面的性能，有这么多ifs。

【讨论】：

【解决方案9】：

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

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

【讨论】：

“禁用标签”不会提交此数据

【解决方案10】：

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

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

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

它也适用于单选按钮。

【讨论】：

【解决方案11】：

如果您希望它们通过表单提交到服务器但不与用户交互，您可以在 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>

【讨论】：

让我重复你的最后一句话（我错过了它并浪费了宝贵的时间）：如果有，你的技术将毫无用处（实际上，在 Firefox 中它工作得很好。问题出在 Chrome 上）。
@NiccoloM.，但是如果你知道它是只读的，为什么要把它包装成标签？您也可以在其后添加标签并使用for 属性。在这种情况下，您可以使用input[type="checkbox"][readonly] + label { pointer-events: none !important; }。
@KevinBui，您是否删除了label 并添加了tabindex？你如何将焦点放在不可聚焦的元素上以按空格？

【解决方案12】：

我会使用只读属性

<input type="checkbox" readonly>

然后使用 CSS 禁用交互：

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

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

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

【讨论】：

这是最好的答案。但是缺少大多数复选框具有关联标签的事实，这将允许单击复选框。所以在标签中做： CBLabel 。注意 for="" 使用 Tab 键也可以正常移动！
这是迄今为止最好的答案。然而对于 css，我也建议在输入中添加标签。喜欢 - input[type='checkbox'][readonly], label.form-check-label 当你用标签包装你的复选框时。

【解决方案13】：

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

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

只读复选框显示状态。
与表单一起返回的值。

需要注意的是：

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

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

一个禁用的复选框，没有名称或值。
如果复选框显示为选中状态，则显示一个隐藏字段，其名称和值与服务器上存储的相同。

所以对于一个选中的复选框：

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

对于未选中的复选框：

&lt;input type="checkbox" disabled="disabled" /&gt;

禁用输入（尤其是复选框）的主要问题是对比度差，这对于某些视觉障碍者来说可能是个问题。用简单的词来表示一个值可能会更好，例如Status: none或Status: implemented，但在使用后者时包括上面的隐藏输入，例如：

&lt;p&gt;Status: Implemented&lt;input type="hidden" name="status" value="implemented" /&gt;&lt;/p&gt;

【讨论】：

【解决方案14】：

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

只检查鼠标而不检查键盘。
仅在页面加载时检查。
挂钩最流行的更改或提交事件，如果有其他东西挂钩，这些更改或提交将不会总是有效。
需要隐藏输入或其他特殊元素/属性，您必须撤消这些元素/属性才能使用 javascript 重新启用复选框。

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

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

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

有效。

【讨论】：

这样可以防止 Tab 键在获得焦点后从元素上移开。
这个答案不仅没有提供任何新方法，而且实际上是在积极误导读者！第 3 点 Hook the ever-popular change or submit events which won't always work out if something else has them hooked. 完全不真实，可能是代码错误的症状。此外，change（也许不是submit）应该是处理更改事件的理想方式，而不是滥用click 和key* 事件。

【解决方案15】：

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

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

【讨论】：

您使用的是Model 对象，但没有解释它的定义位置。此外，答案并没有解决问题，也没有提供与之前任何帖子不同的任何内容。我建议改进此答案的质量和内容，并使其增值。

【解决方案16】：

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

所以，如果你需要提交表单中禁用复选框的值，你可以使用 jQuery：

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

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

【讨论】：