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

您只需循环浏览每个输入并检查按下单击按钮时是否设置了值：

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

我还需要在你的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>

要查看此动态，请访问此fiddle。

Answer 2

您可以为click事件添加一些逻辑，并检查所有输入字段是否具有类似

的值

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

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

Answer 3

试试这个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;
    });
});

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

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

3 个答案: