HTML无法实现任务依赖逻辑，必须用JavaScript控制状态同步；通过data-prereq标记依赖项，监听change等事件更新下游节点状态，并确保可访问性与用户提示。
HTML 里没法直接实现任务依赖逻辑
纯 HTML 是静态标记语言，不处理“前置任务完成才允许点击下一个”这类状态判断。所谓“依赖关系”必须靠 JavaScript 控制交互行为，HTML 只负责提供结构和初始状态。
常见错误现象：disabled 属性写死在 <button></button> 上、用 hidden 硬藏后续任务、靠 CSS 类名假装“已解锁”但实际仍可提交——这些都绕不开 JS 的状态管理。
- 使用场景：学习平台的任务流、表单分步填写、项目管理看板中的子任务启用
- 关键点：依赖关系本质是“状态同步”，HTML 元素只是视图层的投影
- 性能影响：避免对每个任务节点都监听所有前置项变化，改用事件委托或集中状态对象更新
用 data-prereq 标记依赖项再用 JS 绑定
给后续任务元素加自定义属性，比如 <div data-prereq="task-1,task-3">，JS 读取后检查对应前置项是否满足条件（如 class 包含 <code>completed 或 data-status="done"）。
示例逻辑片段：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('[data-prereq]').forEach(el => {
const prereqs = el.dataset.prereq.split(',');
const allDone = prereqs.every(id =>
document.getElementById(id)?.dataset.status === 'done'
);
el.classList.toggle('unlocked', allDone);
el.querySelector('button')?.toggleAttribute('disabled', !allDone);
});
- 参数差异：
data-prereq支持单 ID、逗号分隔多 ID，不建议用空格或分号（解析易错） - 兼容性：
dataset在 IE11+ 可用；若需支持更老浏览器，改用getAttribute('data-prereq') - 容易踩的坑：ID 拼写错误、前置任务 DOM 尚未加载完就执行检查、动态插入的任务没重新绑定逻辑
change 事件比 click 更适合触发依赖更新
用户完成一个任务，往往不是点一下就完事——可能是勾选复选框、提交表单、切换开关、甚至离开输入框。只监听 click 会漏掉很多真实完成动作。
- 推荐监听：
change（适用于<input type="checkbox">、<select></select>）、submit（表单）、blur（输入类任务）、或自定义task:complete事件 - 为什么这样做：把“完成”定义为状态变更，而非鼠标操作，语义更准，也方便后期接入自动检测（如定时校验输入值有效性）
- 性能注意：避免在
change回调里反复查询全部依赖项，应只更新受当前任务影响的下游节点
别用 display: none 隐藏未就绪任务
用 display: none 或 visibility: hidden 隐藏依赖未满足的任务，会导致屏幕阅读器跳过、键盘焦点无法到达、且用户完全不知道“后面还有啥”。这不是提示，是屏蔽。
- 正确做法：保留 DOM 结构，用
opacity: 0.5+pointer-events: none+ 显示提示文字（如“请先完成「上传文件」”） - 容易踩的坑：CSS 中写了
display: none却忘了在 JS 里同步控制aria-hidden，导致无障碍访问断裂 - 额外提醒：如果任务本身含表单控件，禁用状态必须设
disabled属性，不能只靠样式
真正难的不是怎么锁住按钮，而是让依赖关系对用户可感知、可追溯、可调试。DOM 属性、控制台日志、以及每次状态变更时输出 console.log('task-2 now depends on:', deps) —— 这些比花哨动画重要得多。
