jquery - 当特定输入有效时显示按钮

Question

我有一个包含多个输入的 HTML 表单。有些具有 required 类。

我想在所有这些字段都有值时显示“提交”按钮。

我尝试使用:

$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {
        if($(this).val() !== "") {
            $("#submit_button").show();
        } else {
            $("#submit_button").hide();
        }
    });
});

但是如果只有一个输入不为空，这会显示按钮。

是否可以对多个输入执行此操作，一旦具有 required 类的所有输入都不为空？

CheckRequired 函数

function CheckRequired(event) {
    var $form = $(this);

    var emptyElements = $form.find('.required').filter(function() {
        return this.value === ''
    });

    if(emptyElements.length > 0) {
        event.preventDefault();

        emptyElements.addClass("EmptySelect").attr('title', 'This field is required');

        //alert(emptyElements.attr("id"));
        alert("One or more fields cannot be blank");

        event.stopImmediatePropagation();
        return false;
    }
}

Answer 1

您必须使用循环检查 keyup 上所有必需的输入:

<script type="text/javascript">
$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {
        var showBtn = true;
        // Check all inputs
        $('.required').each(function () {
            showBtn = showBtn && ($(this).val() !== "");
        }); //Edited
        // Hide or show the button according to the boolean value
        $("#submit_button").toggle(showBtn);
    });
});
</script>