禁用提交按钮，直到所有字段都有值答案

【问题标题】：Disabling submit button until all fields have values禁用提交按钮，直到所有字段都有值
【发布时间】：2011-08-02 15:10:43
【问题描述】：

我想禁用我的提交按钮，直到所有字段都有值.. 我该怎么做？

<html>
    <head>
        <title></title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#register').attr("disabled", true);
        });
        </script>
    </head>
    <body>
        <form>
        Username<br />
        <input type="text" id="user_input" name="username" /><br />
        Password<br />
        <input type="text" id="pass_input" name="password" /><br />
        Confirm Password<br />
        <input type="text" id="v_pass_input" name="v_password" /><br />
        Email<br />
        <input type="text" id="email" name="email" /><br />     
        <input type="submit" id="register" value="Register" />
        </form>
        <div id="test">
        </div>
    </body>
</html>

【问题讨论】：

攻击呢？使用 enable 和 disable 属性是不安全的......只需在浏览器中单击 f12，在 html 中找到提交按钮，然后将禁用的删除！即使输入为空，它也会提交表单。
@Elnaz 显然，它不能用作安全措施，任何用户提供的数据都必须被视为潜在的攻击。但在许多情况下，它是一个很好的用户体验。

标签： jquery

【解决方案1】：

$('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() {
    if(allFilled()) $('#register').removeAttr('disabled');
});

function allFilled() {
    var filled = true;
    $('body input').each(function() {
        if($(this).val() == '') filled = false;
    });
    return filled;
}

JSFiddle with your code，工作:)

【讨论】：

如果您清空一个输入，提交按钮将保持启用状态。在if 语句之后我添加了else{$('#register').prop("disabled", true);} 所以现在，如果你清空其中一个输入，注册按钮将再次被禁用。

【解决方案2】：

演示：http://jsfiddle.net/kF2uK/2/

function buttonState(){
    $("input").each(function(){
        $('#register').attr('disabled', 'disabled');
        if($(this).val() == "" ) return false;
        $('#register').attr('disabled', '');
    })
}

$(function(){
    $('#register').attr('disabled', 'disabled');
    $('input').change(buttonState);
})

【讨论】：

我认为这是最干净的

【解决方案3】：

看看这个jsfiddle。

HTML

// note the change... I set the disabled property right away
<input type="submit" id="register" value="Register" disabled="disabled" />

JavaScript

(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
    });
})()

这样做的好处是，无论您的表单中有多少输入字段，如果至少有 1 个为空，它将始终禁用按钮。它还检查.keyup() 上的空虚，我认为这使它更便于使用。

【讨论】：

那么我该如何使用单选按钮呢？我有一个多项选择表
这里有个大洞！！！如果有人关闭 javascript，按钮将被禁用。它也应该在脚本执行开始时通过 javascript 设置为禁用。
使用form input 代替form > input 还会选择子元素内的输入（例如divs）。
也使用$("form input").on("keyup change",function () { } 而不仅仅是keyup，因为这也会捕获自动完成值...

【解决方案4】：

所有变量都被缓存，因此循环和 keyup 事件不必在每次运行时都创建一个 jQuery 对象。

var $input = $('input:text'),
    $register = $('#register');    
$register.attr('disabled', true);

$input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});

在http://jsfiddle.net/DKNhx/3/查看工作示例

【讨论】：

如果浏览器缓存值并预填充字段，这仍然有效吗？还是需要 keyup 事件？

【解决方案5】：

对于所有解决方案，应使用“.keyup”而不是“.change”，否则当有人为任何文本字段选择存储在 cookie 中的数据时，提交按钮不会被禁用。

【讨论】：

这是评论而非答案

【解决方案6】：

坟墓挖掘...我喜欢不同的方法：

elem = $('form')
elem.on('keyup','input', checkStatus)
elem.on('change', 'select', checkStatus)

checkStatus = (e) =>
  elems = $('form').find('input:enabled').not('input[type=hidden]').map(-> $(this).val())
  filled = $.grep(elems, (n) -> n)
  bool = elems.size() != $(filled).size()
  $('input:submit').attr('disabled', bool)

【讨论】：

【解决方案7】：

我在这里重构了选择的答案并对其进行了改进。所选答案仅在您每页有一个表单的情况下才有效。我为同一页面上的多个表单解决了这个问题（在我的情况下，我在同一页面上有 2 个模式），我的解决方案只检查必填字段上的值。如果 JavaScript 被禁用并包含一个流畅的 CSS 按钮淡入淡出过渡，我的解决方案会优雅地降级。

查看工作中的 JS fiddle 示例：https://jsfiddle.net/bno08c44/4/

JS

$(function(){
 function submitState(el) {

    var $form = $(el),
        $requiredInputs = $form.find('input:required'),
        $submit = $form.find('input[type="submit"]');

    $submit.attr('disabled', 'disabled');

    $requiredInputs.keyup(function () {

      $form.data('empty', 'false');

      $requiredInputs.each(function() {
        if ($(this).val() === '') {
          $form.data('empty', 'true');
        }
      });

      if ($form.data('empty') === 'true') {
        $submit.attr('disabled', 'disabled').attr('title', 'fill in all required fields');
      } else {
        $submit.removeAttr('disabled').attr('title', 'click to submit');
      }
    });
  }

  // apply to each form element individually
  submitState('#sign_up_user');
  submitState('#login_user');
});

CSS

input[type="submit"] {
  background: #5cb85c;
  color: #fff;
  transition: background 600ms;
  cursor: pointer;
}

input[type="submit"]:disabled {
  background: #555;
  cursor: not-allowed;
}

HTML

<h4>Sign Up</h4>
<form id="sign_up_user" data-empty="" action="#" method="post">
 <input type="email" name="email" placeholder="Email" required>
 <input type="password" name="password" placeholder="Password" required>
 <input type="password" name="password_confirmation" placeholder="Password Confirmation" required>
 <input type="hidden" name="secret" value="secret">
 <input type="submit" value="signup">
</form>

<h4>Login</h4>
<form id="login_user" data-empty="" action="#" method="post">
 <input type="email" name="email" placeholder="Email" required>
 <input type="password" name="password" placeholder="Password" required>
 <input type="checkbox" name="remember" value="1"> remember me
 <input type="submit" value="signup">
</form>

【讨论】：

【解决方案8】：

基于rsplak 的回答。它使用 jQuery 较新的 .on() 而不是已弃用的 .bind()。除了输入之外，它还适用于 select 和其他 html 元素。如果其中一个字段再次变为空白，它也会禁用提交按钮。

var fields = "#user_input, #pass_input, #v_pass_input, #email";

$(fields).on('change', function() {
    if (allFilled()) {
        $('#register').removeAttr('disabled');
    } else {
        $('#register').attr('disabled', 'disabled');
    }
});

function allFilled() {
    var filled = true;
    $(fields).each(function() {
        if ($(this).val() == '') {
            filled = false;
        }
    });
    return filled;
}

演示：JSFiddle

【讨论】：

【解决方案9】：

这很好用，因为所有输入都必须满足不为空的条件。

$(function () {
    $('#submits').attr('disabled', true);
    $('#input_5').change(function () {
        if ($('#input_1').val() != '' && $('#input_2').val() != '' && $('#input_3').val() != '' && $('#input_4').val() != '' && $('#input_5').val() != '') {
            $('#submit').attr('disabled', false);
        } else {
            $('#submit').attr('disabled', true);
        }
     });
 });

【讨论】：