起因与来源
我们在前端页面的开发中，经常会使用到表单标签进行数据的采集，但有时候，我们可能针对某些表单项，禁止用户的输入，这个时候我们首先想到的是给这个 input标签 添加 disabled 属性，这个属性可以让 input标签 失去输入的焦点，并且禁止用户输入任何数据，但是这个时候我们会发现，一旦给input 标签 加上了 disabled属性后，那么给它的点击事件就会失效，所以 如何给 加上disabled属性后的 input标签 添加点击事件呢？
搜索与查找
结合出现的问题，进行各种查找与搜索，发现在input标签 的属性中竟然有一个更好的属性可以实现 disabled属性 的功能，并且还能不阻塞点击事件！有这么好的属性？那就是 readonly属性 这个属性规定 input标签 为只读状态，用户不能进行修改。
解决方案
- 使用 readonly属性 来替换 disabled属性
- 使用其父类标签的点击事件：给input标签添加父类标签，可以是label，也可以是其它的标签，然后把事件写在直接父类标签上，（并把disabled元素样式设置成“pointer-events:none”，这个样式是让元素忽略鼠标事件，让点击直接穿透到下一层元素去，也可以不加这个样式也可以实现）然后就触发到其父类标签label上的点击事件了：
<label onclick="alert('holle world')"><input type="checkbox" disabled style="pointer-events:none"></label>
扩展知识
input标签 readonly属性说明
- 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本
- readonly 属性可以防止用户对 input标签中的值 进行修改。可以设定为满足某种条件（比如选中了一个复选框）后，使用 js 来动态消除 readonly 值，将输入字段切换到可编辑状态
input标签 disabled属性说明
- 被禁用的 input标签 既不可用，也不可进行点击。可以设定为满足某种条件（比如选中了一个复选框）后，通过使用 js 来动态删除 disabled 属性，将 input标签 的值切换为可用
- disabled 属性无法与 <input type="hidden"> 一起使用
