<form action="">
  <div class="btn">
    <label for="agree" class="btn-agree">
      <input type="checkbox" name="agree" id="agree">同意する
    </label>
  </div>

  <div class="btn">
    <input type="submit" value="送信する" disabled id="submit" class="btn-submit">
  </div>
</form>
.btn {
  width: 320px;
  margin: 20px;
  
  &-agree {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #00f;
    border-radius: 4px;
    cursor: pointer;
  }
  
  &-submit {
    appearance: none;
    border: 0;
    padding: 10px 20px;
    border-radius: 4px;
    background: #00f;
    color: #fff;
    font-size: 16px;
  }
  
  &-submit:disabled {
    background: #999;
    color: #eee;
  }
}
$(function(){
  const agree_checked = $('#agree'); //チェックボックス 
  const submit_btn = $('#submit'); //送信ボタン
  
  agree_checked.on('change', function() {
    if (agree_checked.prop('checked')) {
      submit_btn.prop('disabled', false);
    } else {
      submit_btn.prop('disabled', true);
    }
  });
 });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js