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

时间:2014-05-12 06:26:52

标签: javascript jquery html forms twitter-bootstrap-3

我有一个登录表单。

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

最初禁用提交按钮。仅在选中用户名,密码或AT LEAST任何一个复选框时才启用它。用户名&输入密码字段。即使选中或取消选中复选框,也不会发生任何更改。

<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');
});

4 个答案:

答案 0 :(得分:1)

您的HTML无效。 <label>已关闭且未启动且您有重复的ID'chk'...

你需要将它放在文档的onload事件中,事实上,正如@dfsq已经说明的那样,你需要为复选框添加一个检查,如下所示:

$(document).ready(function() {

    var $input = $('input'),
    $register = $('#signin');
    $chk = $('input[type=checkbox]');
    $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 || !$chk.filter(':checked').length);
    });
})

否则当DOM尚未完全加载并且您的字段不可用时它将被执行...

DEMO

答案 1 :(得分: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/

答案 2 :(得分:0)

首先,您在复选框中使用了相同的ID。

将其重命名为

<input id="chk1" type="checkbox" >chk1</label>
 <input id="chk2" type="checkbox" >chk2</label>

并修改您的代码,如下所示:

<script>
$(document).ready(function() {
    var $input = $('input'),
            $register = $('#signin');
    $register.attr('disabled', true);

    $input.keyup(function() {
        var trigger = false;
        $input.each(function() {
             var checked = $("input[type='checkbox']:checked");
             if(checked.length >0) // check if atleast one checkbox checked
             trigger = true;

            if(!trigger){
               if(!$(this).val()) {
                trigger = true;
               }
            }

        });
        trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    });
});
</script>

答案 3 :(得分:0)

您应该尝试这个简单的解决方案:

jQuery(function($) {
  $('form input').on('change',function() {         
    isDisabled = !(($('#txtusername').val().length > 0 && $('#txtpassword').val().length > 0) || $('input[type="checkbox"]:checked').length > 0);
    $('#signin').attr('disabled', isDisabled);
  });
});

它完成了它的工作。