javascript - jquery 每个函数都没有按预期工作

Question

您好，我正在检查一个表格，看看输入内容是否已填写。在填写必填字段之前，我保持提交按钮处于禁用状态。但是，如果我在需要的文本区域中键入，即使未填写以前的必填字段，按钮也会启用。

这是一个 fiddle https://jsfiddle.net/v2to0fcw/1/

这是标记

<form action="/contact" method="post">
    <div class="form-row firstName">
        <p class="form-alert">Enter a valid first name.</p>
        <input type="text" name="firstName" id="firstName" placeholder="First Name*" required class="form-control required">
    </div>
    <div class="form-row lastName">
        <p class="form-alert">Enter a valid last name. Example: Smith</p>
        <input type="text" name="lastName" id="lastName" placeholder="Last Name" class="form-control">
    </div>
    <div class="form-row phone">
        <p class="form-alert">Enter a valid phone number. Example: 555 555 5555</p>
        <input type="tel" name="phone" id="phone" placeholder="Phone" class="form-control">
    </div>
    <div class="form-row email ">
        <p class="form-alert">Enter a valid email. Example: person@email.com</p>
        <input type="email" name="email" id="email" placeholder="Email*" required class="form-control required">
    </div>
    <div class="form-row">
        <input type="text" name="subject" id="subject" placeholder="Subject*" required class="form-control required">
    </div>
    <div class="form-row">
        <textarea name="message" id="message" placeholder="Message*" required class="form-control required"></textarea>
    </div>
    <input type="submit" name="submit" id="submit" value="Send" disabled="disabled" class="btn btn-primary pull-right">
</form>

这里是jquery

$(document).ready(function() 
{ 
    (function() 
    {
        $('.required').on('keyup change', function() 
        {
            $('.required').each(function() 
            {
                if (this.value == '') 
                {
                    $('#submit').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
                } 
                else 
                {
                    $('#submit').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
                }
            });

        });
    })()

除非您填写所有必填字段，否则按钮将不会启用，但如果我跳过前三个字段并输入消息，按钮就会启用。怎么了？

Answer 1

我已经更新了 fiddle :

https://jsfiddle.net/efbonrnr/1/

    $('.required').on('keyup change', function() 
    {
            var requiredFieldsCompleted = true;
        $('.required').each(function() 
        {
            if (this.value == '')
            {
                requiredFieldsCompleted = false;
            }
        });

        if (requiredFieldsCompleted)
        {
            $('#submit').removeAttr('disabled');

        }
        else
        {
            $('#submit').attr('disabled', 'disabled');
        }

    });

问题是您在每次检查后禁用/启用该字段，而没有考虑之前的项目。因此，只有最后一个必填字段会影响结果。