如何根据文本框是否为空启用/禁用按钮（含登录用户邮箱填充）

需求描述 #

• 文本框为空时，对应按钮禁用；文本框有内容时，按钮启用
• 用户已登录时，Email文本框自动填充登录用户的邮箱信息

实现代码 #

JavaScript 代码 #

需要同时处理页面加载时的初始状态检查和文本框输入时的实时状态更新，确保按钮状态随内容动态变化：

// 封装通用的按钮状态更新函数
function updateButtonState(inputId, buttonId) {
    const input = document.getElementById(inputId);
    const button = document.getElementById(buttonId);
    // 用trim()处理输入前后的空格，避免空字符误判
    button.disabled = input.value.trim() === "";
}

$(document).ready(function () {
    // 页面加载时初始化所有按钮状态
    updateButtonState("Email", "Continuebtn");
    updateButtonState("PhoneNoTextbox", "PhoneBtn");

    // 监听文本框输入事件，实时更新按钮状态
    $("#Email").on("input", function() {
        updateButtonState("Email", "Continuebtn");
    });

    $("#PhoneNoTextbox").on("input", function() {
        updateButtonState("PhoneNoTextbox", "PhoneBtn");
    });
});

HTML 代码示例 #

<label class="form-label QstFonts mx-4 my-4">请输入您的邮箱地址 <span class="text-danger">*</span></label>
<span class="QstFontssmall">请确保您的邮箱地址正确。</span>
<div class="px-0">
    <div class="pt-4 mx-5 d-flex row">
        <div class="row m-auto form-icon">
            <i data-feather="mail" class="fa fa-envelope icons"></i>
            <input id="Email"
                   type="email"
                   asp-for="HLApplication.UserEmail"
                   autocomplete="off"
                   class="input-text form-control-input m-auto p-3"
                   placeholder="邮箱"
                   required="" />
        </div>
        <div class="row m-auto my-3">
            <button id="Continuebtn"
                    type="button"
                    class="btn btn-primary m-auto p-3">
                下一步
            </button>
        </div>
    </div>
</div>

补充说明 #

• 通用函数updateButtonState减少重复代码，同时处理了输入前后空格的边界情况
• 通过input事件监听文本框内容变化，确保按钮状态实时响应
• 若用户已登录，后端框架（如ASP.NET Core）会通过asp-for自动填充邮箱值，页面加载时按钮会自动变为启用状态

内容的提问来源于stack exchange，提问作者IR'Shah