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

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

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

1. HTML结构优化

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

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

  
  
年龄:

  
  
  年:
   
  

  
  
  月:
    
  

关键改进点：

• 统一name属性: input type="radio"元素都使用name="age_unit"，确保它们属于同一组，一次只能选择一个。
• 独特的id属性: 为每个radio按钮设置唯一的id（如radio_years, radio_months），并使用label的for属性与之关联。
• 嵌套关联输入框: 将数字输入框（input type="number"）直接嵌套在对应的label元素中。这种结构使得JavaScript更容易找到与单选按钮关联的输入框。
• 初始禁用: 所有的数字输入框在页面加载时都设置为disabled，直到用户做出选择。
• 有意义的name属性: 数字输入框的name属性使用了数组形式（如age[years]），这在提交表单时有助于后端识别数据。

2. JavaScript事件处理

为了实现动态启用和禁用输入框的功能，我们将使用事件委托机制，监听document上的change事件。这种方法效率更高，因为它只需要一个事件监听器来处理所有相关的单选按钮。

document.addEventListener('change', e => {
  // 检查触发事件的元素是否是我们的单选按钮组
  if (e.target.name === 'age_unit') {
    const parentContainer = e.target.parentNode.parentNode; // 获取最外层div
    const selectedUnit = e.target.value; // 获取当前选中的值 (years 或 months)

    // 找到当前选中的单选按钮对应的数字输入框
    const selfInput = parentContainer.querySelector(`input[type='number'][name='age[${selectedUnit}]']`);
    // 找到所有非当前选中的数字输入框
    const otherInputs = parentContainer.querySelectorAll(`input[type='number']:not([name='age[${selectedUnit}]'])`);

    // 启用当前选中的输入框
    if (selfInput) {
      selfInput.disabled = false;
      selfInput.required = true; // 设置为必填
      selfInput.focus(); // 自动获取焦点
    }

    // 禁用其他输入框
    otherInputs.forEach(input => {
      input.disabled = true;
      input.required = false; // 移除必填属性
      input.value = ''; // 清空值
    });
  }
});

代码解析：

1. document.addEventListener('change', ...): 在整个文档上注册一个change事件监听器。当任何表单元素的值发生变化时，此函数都会被调用。
2. if (e.target.name === 'age_unit'): 这是一个关键的过滤条件。它确保我们只处理由name为age_unit的单选按钮触发的change事件。e.target指向实际触发事件的元素。
3. parentContainer: 通过两次parentNode向上查找，获取包含所有单选按钮和输入框的共同父级div.md-form。这使得查找关联元素更加精确。
4. selectedUnit = e.target.value: 获取当前被选中的单选按钮的value属性（即"years"或"months"）。
5. selfInput: 使用模板字符串和属性选择器，精确地找到与当前选中单选按钮关联的数字输入框。例如，如果selectedUnit是"years"，它会找到input[type='number'][name='age[years]']。
6. otherInputs: 使用:not()选择器，找到所有类型为number但name属性不匹配当前selectedUnit的输入框。
7. 启用/禁用逻辑:
   • selfInput.disabled = false;：启用当前关联的输入框。
   • selfInput.required = true;：将当前输入框设置为必填，提升数据完整性。
   • selfInput.focus();：将焦点设置到当前启用的输入框，方便用户直接输入。
   • otherInputs.forEach(...)：遍历所有其他输入框，将其禁用，移除必填属性，并清空其值，避免提交无效数据。

3. CSS样式（可选）

为了使数字输入框在视觉上更统一，可以添加简单的CSS样式：

[type='number']{
  width:70px; /* 设置宽度 */
}

注意事项与总结

• ID的唯一性: 确保HTML中的id属性是唯一的。在原问题中，id="age_in_years"被用于单选按钮和数字输入框，这是不规范的，会导致document.getElementById行为异常。本教程的解决方案通过name属性和parentNode结合querySelector来定位元素，避免了对重复ID的依赖。
• checked属性: checked是HTMLInputElement的一个布尔属性，用于检查单选按钮或复选框是否被选中，而不是一个方法。因此，正确的用法是element.checked而非element.checked()。
• 用户体验: 自动获取焦点到启用的输入框（selfInput.focus()）是一个很好的用户体验实践。清空被禁用输入框的值也能防止意外提交旧数据。
• 可访问性: 确保label元素与输入框正确关联（通过for属性或嵌套），这对于屏幕阅读器等辅助技术至关重要。

通过上述HTML结构优化和JavaScript事件处理，您将能够构建一个响应迅速、用户友好的表单，根据单选按钮的选择动态控制相关输入框的可用性。这种模式不仅适用于年龄输入，也可推广到其他需要联动控制的表单场景。