Question

我检查了大部分类似问题的答案。我无法让它发挥作用。

是因为我使用Google提供的jquery库吗？

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>Hello, world!</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    <script>
        (function(){
            $('form > input').keyup(function(){
                var empty = false;
                $('form > input').each(function(){
                    if ($(this).val() == ''){
                        empty = true;
                    } 
                });
                if (empty){
                    $('#submitForm').prop('disabled','disabled');
                } else {
                    $('#submitForm').prop('disabled',false);
                }
            });
        })()
    </script>
    </head>  
    <body>  
    <form method="POST">
        Username: <input type="text" name="username"><br>
        Password: <input type="password" name="password"><br>
        <input type="submit" id="submitForm" name="Log In" disabled="disabled">
    </form>
    </body>  
    </html>

Answer 1

我有另一个想法...... 让我们使用如下更改事件：

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>Hello, world!</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    <script>
        $(document).ready(function(){
          empty = true;
          $("form input").change(function(){
            $("form input").each(function(){
              if ($(this).val().trim() == ''){
                empty = true;
                return false;
              }
              empty = false;
            })
            if (!empty){
              $("#submitForm").removeAttr('disabled')
            }
            else{
              $("#submitForm").attr('disabled','disabled')
            }
          })
        })
    </script>
    </head>  
    <body>  
    <form method="POST">
        Username: <input type="text" name="username"><br>
        Password: <input type="password" name="password"> <br>
        <input type="submit" value="send" id="submitForm" name="Log In" disabled="disabled">
    </form>
    </body>  
    </html>

结帐This DEMO

此外，最简单的不需要JavaScript的解决方案是使用HTML属性required

<form method="POST">
        Username: <input type="text" name="username" required><br>
        Password: <input type="password" name="password" required> <br>
        <input type="submit" value="send" id="submitForm" name="Log In">
    </form>

Answer 2

＆＃13;

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>Hello, world!</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    <script>
        $(document).ready(function(){
            $('form > input').on('change, keyup', function(){
                var empty = false;
                $('form > input').each(function(){
                    if ($(this).val() == ''){
                        empty = true;
                    } 
                });
                if (!empty){
                    $('#submitForm').removeAttr('disabled');
                }else{
                    $('#submitForm').attr('disabled','');
                    return;
                }
            });
        });
    </script>
    </head>  
    <body>  
    <form method="POST">
        Username: <input type="text" name="username"><br>
        Password: <input type="password" name="password"><br>
        <button id="submitForm" name="Log In" disabled> Submit </button>
    </form>
    </body>  
    </html>

＆＃13;

我改变了你的代码，因为它不起作用....

正如Erik提到的，如果有人复制/粘贴keyup不会工作，所以我也添加了更改。

Answer 3

这是一个纯JavaScript的解决方案

＆＃13;

const inputs = document.querySelectorAll('input:not([type=submit])');
const submit = document.querySelector('[type=submit]');

function areInputsEmpty() {
return Array.from(inputs).every(input => input.value !== '');
}

function toggleDisable(event) {
    const values = areInputsEmpty();

    if (values) {
        submit.removeAttribute('disabled');
    } else {
        submit.setAttribute('disabled', '');
    }
}

inputs.forEach(input => input.addEventListener('keyup', toggleDisable));

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        label { display: block; }
    </style>
</head>
<body>
    <form method="POST">
        <label for="username">Username</label>
        <input name="username">

        <label for="password">Password</label>
        <input type="password" name="password">

        <div>
            <input type="submit" value="Submit" disabled>
        </div>
    </form>
</body>
</html>

＆＃13;

填写所有输入后启用提交按钮

3 个答案: