ASP.NET Core中如何根据下拉框与文本域状态启用/禁用保存按钮

你需要同时监听下拉框的选择变化和文本域的输入事件，结合两个条件判断按钮状态，以下是修改后的完整实现：

修改后的HTML代码 #

<div class="row border-top pt-2">
    <div class="col-md-4">
        <span>Decision</span><span asp-validation-for="Heating.Status"></span>
        <!-- 添加id和onchange事件，确保下拉框变化时触发判断逻辑 -->
        <select id="statusSelect" asp-for="Heating.Status" asp-items="Html.GetEnumSelectList<ApplicationDecision>()" class="form-control" onchange="success()">
            <option></option>
        </select>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <span>Comments</span><span></span>
        <textarea class="form-control " id="textsend" onkeyup="success()" style="height:100px" maxlength="2000"></textarea>
    </div>
</div>
<div class="row border-top p-2">
    <div class="col">
        <input type="submit" id="button" value="Save" class="btn btn-blueTwo float-right" disabled />
    </div>
</div>

修改后的JavaScript代码 #

function success() {
    // 获取页面元素
    const statusSelect = document.getElementById('statusSelect');
    const textArea = document.getElementById('textsend');
    const saveButton = document.getElementById('button');
    
    // 条件1：下拉框选中了非"待处理"的状态（已接受/已拒绝）
    const hasValidStatus = statusSelect.value === "1" || statusSelect.value === "2";
    // 条件2：文本域内容不为空（trim()过滤全空格的无效输入）
    const hasValidComment = textArea.value.trim() !== "";
    
    // 只要满足任一条件就启用按钮，否则禁用
    saveButton.disabled = !(hasValidStatus || hasValidComment);
}

// 页面加载完成后自动执行一次，确保初始状态正确
document.addEventListener('DOMContentLoaded', success);

关键说明 #

1. 下拉框事件绑定：给下拉框添加onchange事件，确保用户切换选项时立即触发状态判断
2. 条件逻辑优化：同时判断两个核心条件，只要其中一个满足就启用按钮
3. 初始状态处理：通过DOMContentLoaded事件在页面加载完成后自动执行一次判断，避免页面初始化时按钮状态错误
4. 兼容扩展：如果后续枚举新增非0状态值，可以把hasValidStatus的判断改为parseInt(statusSelect.value) !== 0 && !isNaN(parseInt(statusSelect.value))，无需修改新增的枚举值

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