实现两个下拉框均选择后启用提交按钮的jQuery问题

问题根源 #

你当前的代码大概率存在以下两个问题之一：

• 仅为第一个下拉框绑定了change事件监听，第二个下拉框的选择变化不会触发验证逻辑；
• 验证逻辑只检查了第一个下拉框的选中值，未同时判断第二个下拉框的有效性。

解决方案 #

给两个下拉框统一绑定事件，每次触发时同时验证两个下拉框的选中状态，再动态设置提交按钮的禁用状态：

1. 基础实现代码 #

假设你的下拉框默认选项值为0（可根据实际默认值调整判断条件）：

// 同时监听两个下拉框的change事件
$('#yul_log_christmas_serving_id, #yul_log_christmas_flavor_id').on('change', function() {
    // 获取两个下拉框的选中值
    const servingSelected = $('#yul_log_christmas_serving_id').val();
    const flavorSelected = $('#yul_log_christmas_flavor_id').val();
    
    // 判断是否均选中有效选项（这里以值不等于0为有效条件）
    const canSubmit = servingSelected !== '0' && flavorSelected !== '0';
    
    // 设置按钮的禁用状态：!canSubmit表示当无法提交时禁用
    $('#add-product').prop('disabled', !canSubmit);
});

2. 优化：封装验证函数（支持页面初始化检查） #

如果页面加载时两个下拉框可能已默认选中有效选项，建议将验证逻辑封装为函数，页面初始化时也执行一次：

function validateForm() {
    const servingVal = $('#yul_log_christmas_serving_id').val();
    const flavorVal = $('#yul_log_christmas_flavor_id').val();
    const isValid = servingVal !== '0' && flavorVal !== '0';
    
    $('#add-product').prop('disabled', !isValid);
}

// 页面加载完成后执行初始化验证
$(document).ready(function() {
    validateForm();
    // 绑定下拉框变化事件
    $('#yul_log_christmas_serving_id, #yul_log_christmas_flavor_id').on('change', validateForm);
});

关键注意点 #

• 务必使用prop('disabled', 状态)而非attr('disabled', 状态)来设置按钮禁用状态，jQuery中针对布尔属性（如disabled）推荐用prop；
• 调整判断条件中的'0'为你实际的无效选项值（比如空字符串''或其他默认标识）。

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