Error in enabling submit button when all field are entered

Question

I have a login form.

Field: Username textbox, password text box, 2 check boxes, submit button--- everything inside a form.

submit button initially disabled. It is enabled only when username, password or AT LEAST any one checkbox is checked. button gets enabled when username & password fields are entered. no change happens even if checkbox is checked or unchecked.

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

This is the form. Below given is the javascript function I use.

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

You need to listen checkboxes change event too. Try this code:

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

Demo: http://jsfiddle.net/jy3UR/1/

Answer 2

Your HTML is invalid. A <label> is closed which wasn't started and you have a duplicate ID 'chk'...

You need to put it in the onload event of the document and indeed as @dfsq already stated, you need to add a check for the checkboxes too, like so:

$(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);
    });
})

otherwise it will get executed when the DOM has not fully loaded yet and your fields will not be available...

DEMO

Answer 3

First of all you have used same id for both the check box.

rename it like below

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

and modify your code like below :

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

Answer 4

You should try this simple solution :

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

It does its job.