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

71

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

<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>
jquery 
— 安德鲁·费拉拉
source
3
攻击呢？使用启用和禁用属性并不安全。...只需在浏览器中单击f12，在html中找到“提交”按钮，然后删除已禁用！即使输入为空，它也会提交表单。
— 埃纳兹
2
@Elnaz显然，它不能用作安全性，任何用户提供的数据都必须视为潜在的攻击。但是在很多情况下，它是一个不错的用户体验。
— 减少活动

Answers:

97

看看这个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()，我认为它使可用性更方便。

— 里斯托
source
1
那么如何使用单选按钮呢？我有多项选择表格
— Azzurrio
1
根据stackoverflow.com/questions/7637790/…，将禁用属性设置为'disabled'并使用.removeAttr（'disabled'）删除禁用属性可能更好，而不是将其设置为false。
— tmarthal
9
巨大的孔在这里！！！如果有人关闭了javascript，则该按钮将被禁用。在脚本执行开始时，也应该通过javascript将其设置为禁用。
— Jacek Kowalewski 2014年
2
使用form input代替form > input还会选择子元素（例如divs）内的输入。
— Fernando Correia
4
还可以使用$("form input").on("keyup change",function () { }，而不是仅仅keyup因为这将赶上自动完成值太...
— ᴍᴀᴛᴛʙᴀᴋᴇʀ
20 
$('#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与您的代码一起工作：)

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

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

— 沙尚克
source
5
这不是评论，不是答案
— Mark W
7

所有变量都被缓存，因此loop和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/查看工作示例

— 侯赛因
source
如果浏览器缓存值并预填充字段，这仍然有效吗？还是需要按键事件？
— vphilipnyc
5

演示：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);
})
— fl00r
source
我认为这是最干净的
— Oneezy
1

我在这里重构了选定的答案并对其进行了改进。假设您每页只有一种表格，那么选择的答案才有效。我在同一页面上针对多种表单解决了此问题（在我的情况下，我在同一页面上有2个模式），我的解决方案仅检查必填字段上的值。如果禁用JavaScript，则我的解决方案会自动降级，并包括光滑的CSS按钮淡入淡出过渡。

请参阅工作的JS小提琴示例：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>
— 格罗弗
source
0

挖墓...我喜欢另一种方法：

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)
— 杜多
source
0

基于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

— CSquared
source
0

由于所有输入必须满足不为null的条件，因此效果很好。

$(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);
        }
     });
 });
— 安德鲁
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.