如何使复选框只读而不是禁用？

问题出现的原因：复选框默认是可编辑的，但有时我们希望将其设置为只读，以防止用户更改其状态。然而，HTML并没有提供一个直接的属性来将复选框设置为只读。因此，我们需要通过其他方法来实现这个目标。

解决方法：

我们可以通过CSS来实现将复选框设置为只读的效果。具体操作如下：

1. 首先，在HTML中创建一个表单，并在表单中添加一个或多个复选框。例如：

2. 然后，在CSS中添加以下样式：

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

这段CSS代码中的`pointer-events: none;`属性将禁用复选框的交互功能，从而实现了只读的效果。

此外，如果希望防止通过键盘勾选复选框，可以参考Patrick在stackoverflow上的回答。他提供了一种解决方案，链接为：stackoverflow.com/a/12267350/1091926。

如果复选框后面有一个标签（也是可点击的），我们还可以添加以下CSS样式来将标签设置为只读：`input[type="checkbox"][readonly] + label { pointer-events: none; }`。

通过以上的CSS样式设置，我们可以将复选框设置为只读，防止用户更改其状态。这是一个简单且实用的解决方案。

如何使复选框只读且不禁用？

要使复选框只读且不禁用，可以通过以下方法实现：

1. 使用HTML属性设置：在复选框的input标签中添加readonly属性即可，如下所示：

这会使复选框只读，用户无法修改其状态，但仍然可以通过键盘上的Tab键进行导航。

2. 使用JavaScript设置：可以通过JavaScript代码来设置复选框的只读属性，如下所示：

通过将复选框的readOnly属性设置为true，可以实现只读效果。

3. 使用CSS样式设置：通过CSS样式，可以将复选框设置为只读外观，如下所示：

通过将pointer-events属性设置为none，可以禁止对复选框的交互操作，将opacity属性设置为0.5，可以使复选框显示为半透明，以表示其只读状态。

以上是使复选框只读且不禁用的几种方法，根据实际需求选择适合的方法即可。

问题的原因是没有直接的属性可以使复选框只读。但是可以通过以下方法来实现。

[DEMO](http://jsfiddle.net/wfVFW/3/)

我试了一下，但是没起作用。当我点击复选框时它会取消选中状态，你可以在演示中看到它的正确工作。我已经在我的答案中添加了演示。

同意Kundan的观点。我在大多数浏览器中进行了测试，以确保我没有遗漏什么。

很好的技巧，这样我就不需要创建一些虚拟字段和隐藏字段。

键盘导航也可以使用（通过按tab键到达并按下空格键）。

非常棒的答案。