javascript - 输入所有字段时启用提交按钮时出错

Question

我有一个登录表单。

字段:用户名文本框、密码文本框、2 个复选框、提交按钮--- 表单中的所有内容。

提交按钮最初被禁用。只有当用户名、密码或至少任何一个复选框被选中时，它才会被启用。输入用户名和密码字段时启用按钮。即使选中或取消选中复选框，也不会发生任何变化。

<form class="form-horizontal" role="form" action="page2.html">
    <div class="form-group">
        <label for="txtusername" class="col-sm-4 control-label ">Username</label>
        <div class="col-sm-8">
            <input type="text" class="form-control textboxprop" id="txtusername" placeholder="Username">
        </div>
    </div>
    <div class="form-group">
        <label for="txtpassword" class="col-sm-4 control-label ">Password</label>
        <div class="col-sm-8">
            <input type="password" class="form-control textboxprop" id="txtpassword" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-4 col-sm-8">
            <div class="checkbox">

                    <input id="chk" type="checkbox" >chk1
                    <input id="chk" type="checkbox" >chk2
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-4 col-sm-8">
            <button type="submit" id="signin" class="btn btn-default" disabled>Sign in</button>
        </div>
    </div>
</form> 

这是表格。下面给出的是我使用的 javascript 函数。

var $input = $('input'),
$register = $('#signin');
$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');
});

Answer 1

您还需要监听复选框更改事件。试试这个代码:

var $input = $('input'),
$check = $input.filter(':checkbox'),
$register = $('#signin');
$register.attr('disabled', true);

$input.on('keyup change', function() {
    var trigger = false;
    $input.each(function() {
        if (this.type != 'checkbox' && !$(this).val()) {
            trigger = true;
        }
    });

    $register.prop('disabled', trigger || !$check.filter(':checked').length);
});

演示:http://jsfiddle.net/jy3UR/1/