如何根据其他输入框状态禁用表单字段？

要实现当inlineFormInputName2为空时禁用inlineFormInputGroupUsername2的需求，咱们用原生JavaScript就能轻松搞定，下面是具体的实现步骤和完整代码：

核心思路 #

1. 页面加载时先检查Name输入框的状态，初始化Username字段的禁用状态
2. 监听Name输入框的输入事件，实时根据内容切换Username字段的禁用状态

完整代码示例 #

<div class="container">
  <form class="form-inline">
    <label class="sr-only" for="inlineFormInputName2">Name</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
    
    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    </div>
    
    <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </form>
</div>

<script>
// 获取对应的DOM元素
const nameInput = document.getElementById('inlineFormInputName2');
const usernameInput = document.getElementById('inlineFormInputGroupUsername2');

// 定义状态切换函数
function toggleUsernameDisabled() {
  // 用trim()处理用户输入空格的情况，避免空格被当作有效内容
  const isNameEmpty = nameInput.value.trim() === '';
  usernameInput.disabled = isNameEmpty;
}

// 页面加载时初始化状态
toggleUsernameDisabled();

// 监听Name输入框的输入事件，实时更新状态
nameInput.addEventListener('input', toggleUsernameDisabled);
</script>

关键细节说明 #

• 初始化状态：页面加载时就调用一次状态切换函数，确保如果Name输入框默认是空的，Username字段一开始就是禁用的
• 实时监听：使用input事件而非keyup，这样能覆盖所有输入场景（比如粘贴内容、右键菜单输入等）
• 处理空格：用trim()去掉输入内容的首尾空格，避免用户只输入空格就触发启用的情况

这样就能完美实现你想要的联动效果啦！

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