javascript - 填写字段后如何启用按钮？

Question

我试图在禁用按钮的情况下隐藏部分表单，并让用户单击按钮以在填写先前字段时显示其余表单。有人可以帮忙吗？这是我的代码示例:

HTML

<form>
<div id="group1">

        <label>Field 1:</label>
        <input type="text" class="field1"/><br/>
        <label>Field 2:</label>
        <input type="text" class="field2"/><br/>
        <label>Field 3:</label>
        <input type="text" class="field3"/><br/>

</div>

    <div align="center">
    <button id="show_form" onClick = "this.style.display= 'none'" disabled="disabled">
    Enter Billing Info</button>
    </div>

<div id="group2">

       <label>Field 4:</label>
       <input type="text" class="field4"/><br/>
       <label>Field 5:</label>
       <input type="text" class="field5"/><br/>
       <label>Field 6:</label>
       <input type="text" class="field6"/><br/>

</div>
</form>

JQUERY

<script>
$(document).ready(function () {
    $('#group1').find('input[type="text"]').keyup(function () {
    var flag = true;
    $('#group1').find('input[type="text"]').each(function () {
        if ($(this).val().length === 0) {
            flag = false;
            return;
        }
    });

    if (flag) {
        $("#show_form").prop("disabled", false);
    } else {
        $("#show_form").prop("disabled", true);
        $("#group2").hide();

        $("#show_form").show();
    }
});

$("#group2").hide();

$("#show_form").click(function (){
    $("#group2").show();

    return false;
});

});
</script>

Answer 1

试试这个 jQuery:

$(document).ready(function () {
    $('#group1').find('input[type="text"]').keyup(function () {
        var flag = true;
        $('#group1').find('input[type="text"]').each(function () {
            if ($(this).val().length === 0) {
                flag = false;
                return;
            }
        });

        if (flag) {
            $("#show_form").prop("disabled", false);
        } else {
            /* This will hide the bottom form and disable the button again if
             * any of the field above will be emptied.
             * NOTE: This will just hide the form; it will not clear the fields.
             */
            $("#show_form").prop("disabled", true);
            $("#group2").hide();
        }
    });

    $("#group2").hide();
    $("#show_form").click(function (){
        $("#group2").show();
        return false;
    });
});

这将在填写初始表单中的所有字段时启用该按钮。然后用户将能够单击该按钮以查看表单的其余部分。