在前端开发中，我们经常需要将表单元素设置为只读或禁用状态，以便用户无法编辑或更改其值。在某些情况下，我们可能需要保留表单元素的当前值，并且仍然允许它们在视觉上呈现为可选状态。这时就需要将复选框设置为只读（readonly）状态。
只读 vs 禁用
在了解如何将复选框设置为只读之前，我们需要区分只读和禁用两种状态的区别。
- 只读（readonly）状态：表单元素的值不能被用户编辑，但是可以通过脚本或 DOM 操作来修改。
- 禁用（disabled）状态：表单元素的值不能被用户编辑，也不能通过脚本或 DOM 操作来修改。
通常情况下，我们使用 disabled 属性来禁用表单元素，而使用 readonly 属性来将表单元素设置为只读状态。
将复选框设置为只读
要将复选框设置为只读，只需向 input 元素添加 readonly 属性即可：
<input type="checkbox" name="example" value="1" readonly>
设置该属性后，复选框将无法通过用户交互进行更改，但您仍然可以使用 JavaScript 或其他编程语言通过 DOM 操作来更改其 checked 属性。
例如，在 jQuery 中，您可以使用以下代码来设置复选框的 checked 属性：
// 将名为 example 的复选框设置为已选中状态
$('input[name="example"]').prop('checked', true);但请注意，如果您希望保留复选框的可编辑性，并仅在表单提交时将其设置为只读，则可以在表单提交前使用 JavaScript 来移除 readonly 属性。
例如，在以下示例中，我们添加了一个按钮，当用户单击该按钮时，将从复选框中删除 readonly 属性，以便允许用户更改其值：
<input type="checkbox" name="example" value="1" readonly>
<button id="edit-btn">编辑</button>
<script>
$('#edit-btn').click(function() {
$('input[name="example"]').prop('readonly', false);
});
</script>这样，当用户单击 "编辑" 按钮时，复选框将变为可编辑状态，直到用户提交表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28796