如何实现单选按钮联动：禁用关联输入框的专业指南

<div class="md-form mb-3">
    <i class="fas fa-paw prefix grey-text"></i><label data-error="wrong" data-success="right" style="padding-left: 5px">Age: </label>
    <br />
    <!-- 问题：age_in_years 同时作为 radio 的 id 和 name，以及 number input 的 id 和 name -->
    <input type="radio"  id="age_in_years" name="age_in_years" value="years">
    <label for="age_in_years">Años:</label><input id="age_in_years"type="number" name="age_in_years" ng-model="age_in_years" class="form-control" style="margin-left: 5px;width: 70px;"/>
    <!-- 问题：age_in_months 同样存在 id 和 name 的重复使用 -->
    <input type="radio"  id="age_in_months" name="age_in_months" value="months">
    <label for="age_in_months">Months:</label><input id="age_in_months" type="number" name="age_in_months" value="age_in_months" ng-model="age_in_months" class="form-control" style="margin-left: 5px;width:70px;"/>
</div>

<script>
    function selection() {
        let x = document.getElementById("age_in_years"); // 这里的 id 选择器会选取第一个匹配的元素
        let y = document.getElementById("age_in_months");

        if (x.checked()) { // 错误：.checked 是属性，不是方法
            document.getElementById("age_in_months").disabled = true; // 错误：禁用了另一个 radio，而非其关联的 number input
        }
        else if (y.checked()) { // 错误：.checked 是属性，不是方法
            document.getElementById("age_in_years").disabled = true; // 错误：禁用了另一个 radio
        }
    }
    // 此外，这段 JS 代码并没有被任何事件触发
</script>

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

  <!-- 单选按钮组，name="age_unit" 确保单选 -->
  <input type="radio" name="age_unit" value="years" />
  <!-- label 内部嵌套 number input，实现关联 -->
  <label>Años:
   <!-- number input 拥有独特的 name="age[years]" 且初始禁用 -->
   <input type="number" name="age[years]" ng-model="age_in_years" class="form-control" disabled />
  </label>

  <input type="radio" name="age_unit" value="months" />
  <label>Months:
    <input type="number" name="age[months]" ng-model="age_in_months" class="form-control" disabled />
  </label>
</div>

document.addEventListener('change', e => {
  // 检查事件目标是否是我们关心的单选按钮
  if (e.target.name === 'age_unit' && e.target.type === 'radio') {
    let parentContainer = e.target.parentNode.parentNode; // 获取最外层的 .md-form mb-3 div

    // 获取当前选中的单选按钮的值 (e.g., "years" 或 "months")
    const selectedUnit = e.target.value;

    // 查找当前选中的单选按钮对应的数字输入框
    // 这里的选择器利用了 name 属性的特点
    let selfNumberInput = parentContainer.querySelector(`input[type='number'][name='age[${selectedUnit}]']`);

    // 查找其他未被选中的单选按钮对应的数字输入框
    let otherNumberInput = parentContainer.querySelector(`input[type='number']:not([name='age[${selectedUnit}]'])`);

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

    // 禁用其他数字输入框
    if (otherNumberInput) {
      otherNumberInput.disabled = true;
      otherNumberInput.required = false; // 取消必填
      otherNumberInput.value = ''; // 清空值，防止提交不必要的数据
    }
  }
});

[type='number']{
  width:70px;
}