如何实现用户名与密码textbox联动控制登录button启用/禁用

核心逻辑很直接：同时监听用户名和密码输入框的内容变化事件，每次触发时检查两个输入框的内容是否都不为空（可按需处理首尾空格），再据此设置登录按钮的禁用状态。

原生JavaScript实现 #

HTML结构 #

<form id="loginForm">
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button type="submit" id="loginBtn" disabled>登录</button>
</form>

JavaScript代码 #

const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginBtn = document.getElementById('loginBtn');

// 定义检查并更新按钮状态的函数
function updateBtnState() {
  // 去除首尾空格后判断是否为空，避免用户只输入空格的情况
  const hasUsername = usernameInput.value.trim() !== '';
  const hasPassword = passwordInput.value.trim() !== '';
  // 两个输入都有内容时，按钮启用；否则禁用
  loginBtn.disabled = !(hasUsername && hasPassword);
}

// 给两个输入框绑定input事件，覆盖输入、粘贴、删除等所有内容变化场景
usernameInput.addEventListener('input', updateBtnState);
passwordInput.addEventListener('input', updateBtnState);

jQuery实现（如果项目已引入jQuery） #

<form id="loginForm">
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button type="submit" id="loginBtn" disabled>登录</button>
</form>

<script>
$('#username, #password').on('input', function() {
  const hasUsername = $('#username').val().trim() !== '';
  const hasPassword = $('#password').val().trim() !== '';
  $('#loginBtn').prop('disabled', !(hasUsername && hasPassword));
});
</script>

关键说明 #

• 使用input事件而非keyup：input能响应所有内容变更操作（比如右键粘贴、拖拽文本、输入法选词等），兼容性更好。
• 加入trim()：避免用户输入纯空格就触发按钮启用的情况，若业务允许纯空格输入，可去掉该方法。

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