readonly对checkbox无效，因HTML规范仅支持文本类控件；需用JavaScript拦截click或change事件来实现只读效果，disabled虽有效但会导致值不提交且样式变化。
不是。readonly 在 <input type="checkbox"> 上**没有标准行为**，绝大多数浏览器（Chrome、Firefox、Safari、Edge）会直接忽略它，既不阻止点击，也不改变样式或状态 —— 它对复选框根本无效。
为什么 readonly 对 checkbox 无作用？
HTML 规范明确限定 readonly 仅适用于可编辑的文本类控件：<input type="text">、<input type="password">、<textarea>。复选框属于“选择型控件”，规范未定义其 readonly 行为，因此各浏览器选择静默忽略该属性。
常见误操作：$('input[type="checkbox"]').attr('readonly', true) 或直接写 <input type="checkbox" readonly> —— 这些写法在 DOM 中看似存在，但实际无法阻止用户点击切换状态。
想让 checkbox “视觉可用但不可改”该怎么做？
必须用 JavaScript 主动拦截交互逻辑，而非依赖 HTML 属性。可靠方案有且仅有以下两种：
- 阻止默认点击行为：
$('input[type="checkbox"]').on('click', function(e) { e.preventDefault(); });—— 最轻量，兼容性好，但需注意事件委托对动态元素的支持 - 监听 change 后强制还原状态：
$('input[type="checkbox"]').on('change', function() { $(this).prop('checked', originalValue); });—— 更稳妥（防键盘空格触发），但略重，originalValue 需提前缓存
补充：CSS 辅助（如 pointer-events: none）可增强体验，但不能替代 JS 拦截 —— 键盘操作（空格键）仍能触发状态变更。
disabled 能用吗？要注意什么？
能用，但有副作用：disabled 确实禁用交互且全浏览器生效，但它会导致两个关键问题：
- 表单提交时，该 checkbox 的值**不会被发送到后端**（即使已勾选）
- 样式变灰，不符合“保持原样但不可改”的设计需求
若必须用 disabled 并回传值，得额外加一个同名 <input type="hidden"> 存值，且提交前手动同步 —— 成本高于纯 JS 拦截方案。
真正容易被忽略的是：**没有“一键只读”的 HTML 属性可跨浏览器作用于 checkbox**。所有看似简洁的写法（readonly、attr('readonly', true)、甚至某些旧版 jQuery 插件封装）本质上都在掩盖这个事实。最终落地必须靠 preventDefault() 或 change 监听 + prop('checked') 强制控制。
