使用JavaScript实现单选按钮联动及其关联输入框的动态启用与禁用

本教程详细阐述了如何通过优化HTML结构和JavaScript事件处理，实现单选按钮（radio button）组的联动效果，即当一个单选按钮被选中时，其关联的文本输入框被启用，而其他单选按钮关联的输入框则被禁用。文章提供了清晰的HTML重构方案、高效的事件委托机制及完整的代码示例，旨在提升表单交互的用户体验和数据录入的准确性。

在构建交互式表单时，我们经常需要根据用户的选择动态调整表单元素的可用性。一个常见场景是，当用户选择某个单选按钮时，与其相关的输入框应被启用以供输入，而其他不相关的输入框则应被禁用。本教程将指导您如何使用纯JavaScript实现这一功能，并优化HTML结构以提高可维护性。

1. HTML结构优化

首先，为了实现单选按钮的正确联动行为，我们需要对HTML结构进行优化。关键在于为同一组的单选按钮设置相同的name属性，确保它们是互斥的。同时，为了更好地管理关联的输入框，我们建议将每个数字输入框嵌套在其对应的label元素中。

以下是优化后的HTML结构示例：

立即学习“Java免费学习笔记（深入）”；

<p class="md-form mb-3">
  <i class="fas fa-paw prefix grey-text"></i>
  <h2>年龄:</h2>

  <!-- 年份选择 -->
  <input type="radio" name="age_unit" value="years" id="radio_years" />
  <label for="radio_years">年:
   <input type="number" name="age[years]" class="form-control" disabled />
  </label>

  <!-- 月份选择 -->
  <input type="radio" name="age_unit" value="months" id="radio_months" />
  <label for="radio_months">月:
    <input type="number" name="age[months]" class="form-control" disabled />
  </label>
</p>

登录后复制

关键改进点：

标签： css javascript java html node 后端 ai css样式 属性选择器 red