Enable submit button if input and checkbox aren't empty

Question

Below I am trying to ensure that my checkbox and inputs are all filled before allowing user to submit. It ignores my check on the checkbox and opens up the submit after the fields only are filled. What am I doing wrong?

$('#first, #last, #pass').bind('keyup', function() {
    if (allFilled()) $('#register').removeAttr('disabled');
});

function allFilled() {
    var filled = true;

    console.log($('#checkbox').prop('checked'))

    $('body input').each(function() {
       if ($(this).val() == '' && $('#checkbox').prop('checked') == false)  filled = false;
    }); 

    return filled
};

html:

<body>
  <form>
    Username
    <br />
    <input type="text" id="first" name="first" />
    <br /> First
    <br />
    <input type="text" id="last" name="last" />
    <br /> Last
    <br />
    <input type="text" id="pass" name="pass" />
    <br /> Password
    <br />
    <input type="checkbox" class="checkbox" id="checkbox" name="checkbox" />
    <br />
    <input type="submit" id="register" disabled value="Register" />
  </form>
  <div id="test">
  </div>
</body>

Seeing your HTML would be useful. [mcve]. You should also be using `.on()` instead of `.bind()` — j08691, Dec 27 '16 at 18:22
As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. — Zakaria Acharki, Dec 27 '16 at 18:23
Possible duplicate of [How do I check if a checkbox is checked in jQuery?](http://stackoverflow.com/questions/901712/how-do-i-check-if-a-checkbox-is-checked-in-jquery) — Arpit Solanki, Dec 27 '16 at 18:26
@ZakariaAcharki that was indeed my problem if you answer i'll vote you correct — caro, Dec 27 '16 at 18:26

score 1 · Accepted Answer · answered Dec 27 '16 at 18:30

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

Please don't use the deprecated method bind() use on() instead :

$('#first, #last, #pass').on('keyup', function() {
    if (allFilled()) $('#register').removeAttr('disabled');
});

Hope this helps.

$('#first, #last, #pass').on('keyup', function() {
  if (allFilled()) $('#register').removeAttr('disabled');
});

function allFilled() {
  var filled = true;

  $('body input').each(function() {
    if ($(this).val() == '' && $('#checkbox').prop('checked') == false)  filled = false;
  }); 
  return filled
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Username
  <br />
  <input type="text" id="first" name="first" />
  <br /> First
  <br />
  <input type="text" id="last" name="last" />
  <br /> Last
  <br />
  <input type="text" id="pass" name="pass" />
  <br /> Password
  <br />
  <input type="checkbox" class="checkbox" id="checkbox" name="checkbox" />
  <br />
  <input type="submit" id="register" disabled value="Register" />
</form>
<div id="test">
</div>

Enable submit button if input and checkbox aren't empty

1 Answers1

Linked