jQuery/JS中checkbox checked属性异常、readonly属性不生效问题

为什么checked属性不在DOM中动态显示，且val()永远返回on？ #

核心原因是混淆了HTML标签特性（attribute）和DOM对象属性（property）的差异，以及jQueryval()方法的取值逻辑：

• 写在HTML标签上的checked是初始状态标记，仅在页面首次加载时生效，用来决定checkbox初始是否勾选。后续用户点击切换的状态，是存在DOM元素对象的checked属性（布尔类型）上的，不会同步回写到HTML标签结构里，所以在浏览器开发者工具的Elements面板查看DOM标签时，不会动态增减checked属性，这是符合W3C规范的正常表现。
• jQuery的val()方法本质是读取表单元素的value特性，只要没有手动给checkbox设置过自定义value值，它的默认value就是固定字符串on，这个值和勾选状态完全无关，自然不会随勾选操作变化。
• 要获取实时的勾选状态，正确做法是用input.prop('checked')（jQuery写法）或者原生input.checked，拿到的true/false才是对应实时状态的结果，测试代码里的输出完全是符合预期的正常结果。

为什么给checkbox设置readonly属性后还是能切换勾选状态？ #

readonly属性从设计之初就不作用于checkbox、radio这类选择型表单控件，这是HTML标准明确规定的行为，不是代码bug。
readonly的作用范围仅限可输入文本的表单控件（比如text输入框、密码框、文本域），用来禁止用户修改控件的文本值，它不会拦截选择类控件的点击切换行为。
如果要实现checkbox不可修改的效果，根据场景选对应方案即可：

• 如果不需要提交该checkbox的值，直接加disabled属性即可，设置后控件会置灰，完全无法点击。
• 如果需要保留表单提交该值的能力，只是禁止用户修改，可以通过拦截点击事件实现只读效果：

// jQuery实现可提交的只读checkbox
input.on('click', function(e) {
    e.preventDefault();
});

内容的提问来源于stack exchange，提问作者clarkk