变更事件

Question

我希望填充警报框，然后在所有条件均通过的情况下启用“提交按钮”，基本的jquery代码在此处：

$("#expCurrencyState").on("change", function() {
    var inputValue = document.getElementById('categoryItem').value;
    var expenseStateValue = document.getElementById('expCurrencyState').value;
    var expAmountValue = document.getElementById('expAmount').value;
    var expDateValue = document.getElementById('expDate').value;

    alert(inputValue);
    alert(expAmountValue);
    alert(expDateValue);
    alert(expenseStateValue);

    if (inputValue.length && expAmountValue.length && expDateValue.length !== 0) {
        alert('passed');
        $('#btnSubmit').prop('disabled', false);
        $('#btnSubmit').addClass('btnActive');
    }
});

Answer 1

我看到的唯一问题是您仅检查#expCurrencyState的更改时间。

您应该在每个必需的元素change事件上运行该代码，并且如果不是所有条件都通过，则还应该禁用该按钮并删除该类。

$("#expCurrencyState,#categoryItem,#expAmount,#expDate").on("change", function() {
    var inputValue = document.getElementById('categoryItem').value;
    var expenseStateValue = document.getElementById('expCurrencyState').value;
    var expAmountValue = document.getElementById('expAmount').value;
    var expDateValue = document.getElementById('expDate').value;

    var validData = inputValue.length && expAmountValue.length && expDateValue.length && expenseStateValue.length;

    if ( validData  ) {
        alert('passed');
    }

    $('#btnSubmit').prop('disabled', !validData); 
    $('#btnSubmit').toggleClass('btnActive', validData);
});