Javascript 填写字段时如何启用按钮？

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

HTML

字段1：


字段2：


字段3：


输入帐单信息
字段4：


字段5：


字段6：

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>

$（文档）.ready（函数（）{
$（'#group1'）.find（'input[type=“text”]”）。keyup（函数（）{
var标志=真；
$（'#group1'）。查找（'input[type=“text”]”）。每个（函数（）{
if（$（this）.val（）.length==0）{
flag=false；
返回；
}
});
国际单项体育联合会（旗）{
$（“显示表单”）.prop（“禁用”，false）；
}否则{
$（“#显示形式”）.prop（“禁用”，真）；
$（“#group2”）.hide（）；
$（“#show_form”）.show（）；
}
});
$（“#group2”）.hide（）；
$（“#显示表格”）。单击（函数（）{
$（“#组2”）.show（）；
返回false；
});
});

单击按钮时，只需循环查看每个输入并检查是否设置了值，如下所示：

$('#show_form').click(function () {
    var fields = $('.js-field');
    var pass = true;

    for (var i = 0; i < fields.length; i++) {
        if (!$(fields[i]).val()) {
            pass = false;
        }
   }

    if (pass === true) {
        $('#group2').show();
    }
});

$（'show#u form'）。单击（函数（）{
变量字段=$（'.js字段'）；
var pass=真；
对于（变量i=0；i

我还需要向html添加一些类：

<form>
<div id="group1">

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

</div>

 <button type="button" id="show_form" value="Show_Form">Enter Billing     
 Info</button>

<div id="group2" style="display: none;">

       <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>

字段1：


字段2：


字段3：


输入帐单
信息
字段4：


字段5：


字段6：

---

要查看它的实际操作，请访问此项。

您可以向单击事件添加一些逻辑，并检查所有输入字段，使其具有如下值

$("#show_form").click(function(){
   var allFilled = true;

   $('#group1').find('input').each(function(){
      //if someone is empty allFilled will keep false
      if(this.value === ''){
         allFilled = false;
         //this breaks the each
         return false;
      }
   });

   if(allFilled){
       $("#group2").show();
   }
});

请记住前面的代码仅适用于输入字段。

尝试以下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;
    });
});

---

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

这无法跟踪正在修改的字段，因为检查输入值的代码仅在文档准备就绪时执行一次。此外，它不会验证在单击button@academo这难道不是因为用户最初将按钮设置为“禁用”，所以仅当上述所有字段都已填充时才启用按钮吗？谢谢。这很有效。如果他们决定删除之前的某个字段，是否有办法再次隐藏表单的第二部分？很好的一点，我没有看到禁用的情况，keyup应该可以工作，但我认为在每个keyup中运行太多了。我已经更新了答案，检查这是否有效@谢谢！但是如果我们不检查每个keyup上的字段，那么我们怎么知道字段是否仍然为空？

$(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;
    });
});