Question

当我尝试运行下面的代码并在浏览器调试器中进入它时，它显示的长度为1或更高，但它仍然会进入此块，就像它被评估为true一样。 ..am我在这里错过了什么？

  function checkEmpty() {
            var empty = false;
            $('form input:text').each(function () {
                console.log($(this).val())
                if ($(this).val().length === 0) {
                    empty = true;
                }
            });

            if (empty) {
                $('#btnContinueCheckout1').attr('disabled', 'disabled');
                $('#btnContinueCheckout2').attr('disabled', 'disabled');
            } else {
                $('#btnContinueCheckout1').removeAttr('disabled');
                $('#btnContinueCheckout2').removeAttr('disabled');
            }
        }

HTML :(这些是输入字段，它们包裹在表单中，并且有2个未显示的结帐按钮）

  <br />
    <br />
    <label><strong>Full Name: &nbsp; &nbsp; &nbsp; &nbsp; </strong></label>&nbsp;&nbsp;
    <input type="text" required="required" onkeyup="checkEmpty()" name="FullName" style="width: 235px;" /><br />
    <br />
    <label><strong>Mailing Address: &nbsp;</strong></label>
    <input type="text" required="required" name="Address" onkeyup="checkEmpty()" style="width: 235px;" /><br />
    <br />
    <label><strong>Email: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong></label>&nbsp;
    <input type="text" required="required" style="width: 235px;" name="Email" onkeyup="checkEmpty()" /><br />
    <br />
    <label><strong>Phone Number: </strong></label>&nbsp;&nbsp;&nbsp;
    <input type="text" required="required" name="Phone" onkeyup="checkEmpty()" />

Answer 1

在jQuery链接的空白html页面中尝试此示例代码：

<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>
<body>
    <form>
        <label><strong>Full Name: &nbsp; &nbsp; &nbsp; &nbsp; </strong></label>&nbsp;&nbsp;
        <input type="text" required="required" onkeyup="checkEmpty()" name="FullName" style="width: 235px;" /><br />
        <br />
        <label><strong>Mailing Address: &nbsp;</strong></label>
        <input type="text" required="required" name="Address" onkeyup="checkEmpty()" style="width: 235px;" /><br />
        <br />
        <label><strong>Email: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong></label>&nbsp;
        <input type="text" required="required" style="width: 235px;" name="Email" onkeyup="checkEmpty()" /><br />
        <br />
        <label><strong>Phone Number: </strong></label>&nbsp;&nbsp;&nbsp;
        <input type="text" required="required" name="Phone" onkeyup="checkEmpty()" />
        <input type="button" id="checkbutton" value="deactivated" disabled/>
    </form>
</body>
<script type="text/javascript">
function checkEmpty() {
    var empty = false;
    $('form input:text').each(function () {
        console.log($(this).val());
        if ($(this).val().length === 0) {
            empty = true;
        }
    });

    if (empty) {
       $('#checkbutton').prop('disabled', 'disabled');
    } else {
        $('#checkbutton').prop('disabled', '');
    }

    console.log('count of textfields: ' + $('form input:text').length);
}
</script>
</html>

它对我来说100％有效。查看控制台以检查文本字段的计数。如果它比您期望的更多，请检查您的HTML，如果您错过了。如果所有字段都已填满，则该按钮将被激活。

Answer 2

问题在于，当您读取一个输入字段时，您将分配empty=true;，但循环将继续并检查其他输入字段。这意味着如果第一个字段为空，但第二个字段不为空，则循环将不起作用。一找到第一个空输入，就试着打破.each（）循环。

function checkEmpty() {
        var empty = false;
        $('form input:text').each(function () {
            console.log($(this).val()); // Also, you forgot the ; here
            if ($(this).val().length === 0) {
                empty = true;
                return false; // Will break out of the .each() loop
            }
        });

        if (empty) {
            $('#btnContinueCheckout1').attr('disabled', 'disabled');
            $('#btnContinueCheckout2').attr('disabled', 'disabled');
        } else {
            $('#btnContinueCheckout1').removeAttr('disabled');
            $('#btnContinueCheckout2').removeAttr('disabled');
        }
    }

javascript条件逻辑不起作用

2 个答案: