如何在用户完成指定任务前锁定内容？课程平台点击下载后解锁下一步按钮

你可以通过给自定义按钮加样式拦截点击、给下载链接加事件监听的方式实现需求，不需要依赖input组件的disabled属性，具体实现步骤如下：

1. 给元素添加唯一标识 #

给下载链接和下一步按钮添加唯一ID，方便JS选中操作，同时给a标签加download属性直接触发下载：

<!-- 下载图片的a标签，加download属性触发直接下载 -->
<a id="download-img-link" href="https://i.sstatic.net/vvMv2.png" rel="nofollow noreferrer" download>
  <img src="https://i.sstatic.net/vvMv2.png" alt="下载示例图片" />
</a>

<!-- 下一步按钮，可替换为你实际用的div/a等任意标签 -->
<div id="next-step-btn" class="btn-disabled">下一步</div>

2. 添加样式区分禁用/可用状态 #

通过CSS的pointer-events属性拦截禁用状态下的点击，同时加视觉提示：

/* 禁用状态样式 */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* 直接拦截所有点击事件，效果等价于input的disabled */
}
/* 可用状态样式 */
.btn-active {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

3. 添加JS交互逻辑 #

监听下载链接的点击事件，触发后解锁下一步按钮，同时支持页面刷新后保留状态：

// 选中对应元素
const downloadLink = document.getElementById('download-img-link');
const nextBtn = document.getElementById('next-step-btn');

// 监听下载链接点击
downloadLink.addEventListener('click', function() {
  // 可根据需求调整延迟时间，避免用户刚点击就立刻解锁
  setTimeout(() => {
    // 切换按钮状态
    nextBtn.classList.remove('btn-disabled');
    nextBtn.classList.add('btn-active');
    // 本地存储完成状态，防止刷新页面后进度丢失
    localStorage.setItem('imgDownloaded', 'true');
  }, 500);
})

// 页面加载时检查历史完成状态
window.addEventListener('load', function() {
  if(localStorage.getItem('imgDownloaded') === 'true') {
    nextBtn.classList.remove('btn-disabled');
    nextBtn.classList.add('btn-active');
  }
})

补充说明 #

• 若需要严格校验用户确实完成了下载（避免点击后取消下载也能解锁），且图片资源与你的站点同源，可将点击逻辑替换为fetch请求获取文件Blob，手动触发下载后再修改按钮状态。
• 若需要多端同步学习进度，可将用户的完成状态上传到后端存储，不要仅依赖本地localStorage，避免用户清除缓存后进度丢失。
• 后续要扩展多主题解锁逻辑时，可将每个主题的完成状态统一存储，页面加载时批量判断进度即可。

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