第6关：表单元素——disabled 属性实战：构建可交互的单选框组

1. 为什么需要disabled属性？

想象一下你去餐厅点餐，菜单上有道招牌菜写着"今日售罄"。虽然你能看到这道菜，但无法选择它——这就是disabled属性在网页表单中的角色。我在开发在线教育平台时，经常遇到这样的需求：某些功能或选项需要暂时对用户不可用，但又不能完全隐藏。

disabled属性最妙的地方在于它提供了视觉反馈和逻辑约束的双重保障。当用户看到灰色的"困难"难度选项时，立刻明白这个选择当前不可用，而不是疑惑为什么找不到这个选项。从技术角度看，浏览器会自动阻止被禁用元素的交互事件，从根本上避免了非法提交。

2. 单选框组的disabled实战

让我们用在线学习平台的课程难度选择场景来具体实现。假设平台规则是：只有完成前置课程的用户才能选择"困难"难度。以下是完整的HTML代码示例：

html复制<div class="course-difficulty">
  <h3>请选择课程难度：</h3>
  <form id="difficultyForm">
    <p>
      <input type="radio" id="easy" name="difficulty" value="easy" checked>
      <label for="easy">简单（适合零基础学员）</label>
    </p>
    <p>
      <input type="radio" id="medium" name="difficulty" value="medium">
      <label for="medium">中等（需要基础概念）</label>
    </p>
    <p>
      <input type="radio" id="hard" name="difficulty" value="hard" disabled>
      <label for="hard">困难（需完成前置课程）</label>
    </p>
  </form>
</div>

几个关键细节需要注意：

1. 每个单选框的name属性必须相同，这样才能形成互斥选择
2. 给input添加了配套的label标签，提升可点击区域
3. disabled属性可以简写，不需要值（规范写法