jQuery实现双日期选择后启用提交按钮的功能异常求助

我来帮你搞定这个问题~ 你的核心需求是只有当两个日期字段都填写完成后，才启用提交按钮，目前代码的问题在于只处理了「启用按钮」的场景，没有处理「当其中一个字段被清空时重新禁用按钮」的情况，另外我们可以优化事件绑定和逻辑判断的严谨性。

问题分析 #

你的原代码逻辑上看起来是对的，但存在两个潜在问题：

1. 仅在两个字段都有值时启用按钮，却没有在字段被清空时重置按钮状态（比如用户先填完两个日期，再清空其中一个，按钮依然会保持启用状态）
2. 绑定的事件过多（paste keyup其实可以被input事件覆盖，date输入框主要依赖change和input事件）

修正后的代码 #

// 绑定更精简的事件：change（选择日期后触发）、input（手动输入日期时触发）
$("#datepicker1, #datepicker2").on('change input', function () {
    // 分别检查两个日期字段是否有值，用trim()避免意外的空格干扰
    const arrivalHasValue = $("#datepicker1").val().trim() !== '';
    const departHasValue = $("#datepicker2").val().trim() !== '';
    
    // 反向判断：只有两个字段都有值时，才将disabled设为false，否则设为true
    $("#register").prop('disabled', !(arrivalHasValue && departHasValue));
});

代码说明 #

• 事件优化：change事件会在用户通过日历选择日期后触发，input事件会在用户手动输入日期内容时触发，这两个事件足以覆盖所有日期输入的场景，不需要额外绑定paste或keyup。
• 逻辑完善：每次触发事件时都会重新检查两个字段的状态，无论是填写还是清空，都会实时更新按钮的禁用状态，完全符合你的需求。
• 严谨性提升：用trim()处理输入值，避免可能的空格导致的误判（虽然HTML5的date输入框不会允许空格，但这是通用的表单验证好习惯）。

测试验证 #

你可以按以下步骤测试：

• 只填写Arrive日期：提交按钮保持禁用状态
• 只填写Depart日期：提交按钮保持禁用状态
• 两个日期都填写：提交按钮自动启用
• 填写完两个日期后，清空其中一个：提交按钮重新变为禁用

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