Disabling buttons

by Alex Fogarty

HTML

<div id="agreements">
  <label for="terms">
    <input type="checkbox" id="terms" />
    I understand and agree to the terms and conditions that I have not taken the time to read
  </label>

  <label for="not-a-liar">
    <input type="checkbox" id="not-a-liar" />
    By checking this box, I hereby affirm that all information provided herein, to the best of my very limited knowledge, is complete and accurate
  </label>

  <label for="privacy">
    <input type="checkbox" id="privacy" />
    I hereby acknowledge that I should carry no expectation of privacy related to any of the information provided herein
  </label>
</div>
<button id="btn-submit" disabled>Sign Me Up!</button>

CSS

html { font-family: Arial; color: #333; }

label, #btn-submit {
  display: block;
  margin: 10px;
}

#btn-submit {
  border: none;
  background-color: #a87fe2;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
}

#btn-submit[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

JavaScript

var $agreements = $("#agreements"),
    $chkAgreement = $agreements.find("input[type='checkbox']"),
    $btnSubmit = $("#btn-submit");

$chkAgreement.on("change", function() {
  if (allAgreementsChecked()) {
    $btnSubmit.prop("disabled", false);
  } else {
    $btnSubmit.prop("disabled", true);
  }
  
});

function allAgreementsChecked() {
  if ($chkAgreement.length == $agreements.find("input[type='checkbox']:checked").length) {
    return true;
  } else {
    return false;
  }
}