How to make button inactive until I fill in all the boxes.

Its not working

This is what I have:

<h1 class="textCenter OldStandard orange fontt">Get Started</h1>
<form>
<input type="email" placeholder="Email" class="js-email" name="email" required>
<span class="block darkRed js-email-err err"></span>
<input type="text" placeholder="Zip Code" class="js-zip" name="zip" required>
<span class="block darkRed js-zip-err err"></span>
<input type="text" placeholder="First Name" class="js-name" name="fname" required>
<span class="block darkRed js-name-err err"></span>
<input type="text" placeholder="Last Name" class="js-lname" name="lname" required>
<span class="block darkRed js-lname-err err"></span>
<input type="text" placeholder="Password" class="js-pass" name="pass" required>
<span class="block darkRed js-pass-err err"></span>
<input type="text" placeholder="Confirm Password" class="js-pass" name="cpass" required>
<span class="block darkRed js-pass-err err"></span>

<span class="textLeft flex alignCenter terms">
<input type="checkbox" name="terms" value="yes" required>
<span>
<span>I agree to </span>
<a class="orange" href="legal.php">Terms & Conditions</a>
</span> </span>
<span class="block darkRed js-post-err err"></span>
<span class="textLeft flex alignCenter terms">
<span>
Keep me posted !
 </span></span>
 <center>
<input class="disabled white c1" type="submit" value="START MY ORDER" disabled>
</center>
</form>

<span class="textCenter block">
<span>Already have an account?</span>
<span class="orange pointer">Login Here</span>

Select allOpen in new window

JS:

$(function() {
  $('form input').change(function() {
    var invalid = false;
    var terms = false;
    var res = $(this.form).serializeArray();
    $.each(res, function(i, e) {
      if (e.value == "") invalid = true;
      if (e.name == 'terms') terms = true;
    });
    if (!invalid && terms) {
      $('#submit-btn').prop({disabled: false}).removeClass('disabled');
    }
    else {
      $('#submit-btn').prop({disabled: true}).addClass('disabled');
    }
  });
  $('form').submit(function(e) {
    e.preventDefault();
  });
});

Select allOpen in new window

css:
I added this with the rest and remove .OrangeBtn from before

.c1.disabled {
 background-color: #c1c1c1;
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}

Select allOpen in new window

But i want it to add this class when its not disabled

#OrderGetStarted .orangeBtn{
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}

Select allOpen in new window

I also tried yours but it didnt work as well.

Its not working

Not helpful.
What is not working?
How is it not working?

The sample I posted works.

My button is disabled, when I post everything, it is still disabled, can I add this call ".OrangeBtn" when it is not disabled?

Yes just append the .addClass('.OrangeBtn') to the following line like this

$('#submit-btn').prop({disabled: false}).removeClass('disabled').addClass('.OrangeBtn');

Select allOpen in new window

And remember to remove it if one of the fields goes blank

$('#submit-btn').prop({disabled: true}).addClass('disabled').removeClass('.OrangeBtn');

Select allOpen in new window

Ok can you take a look at the second code I posted after I said its not working, because it still isnt, and I rechecked yours and it worked, I thought there was something wrong with my internet, but mine still isnt working, am I missing something?

Thank you! Sorry for the complications it was my internet fault. thank you!

No problem - glad you got it working.