決められた数だけcheckedしたら送信

hoge
決められた数だけチェックボックスをクリックしたらボタンがアクティブになる例を紹介します。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="warap">
      <div class="item">
        <input type="checkbox" name="hoge" id="item01" />
        <label for="item01">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
      <div class="item">
        <input type="checkbox" name="hoge" id="item02" />
        <label for="item02">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
      <div class="item">
        <input type="checkbox" name="hoge" id="item03" />
        <label for="item03">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
      <div class="item">
        <input type="checkbox" name="hoge" id="item04" />
        <label for="item04">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
      <div class="item">
        <input type="checkbox" name="hoge" id="item05" />
        <label for="item05">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
      <div class="item">
        <input type="checkbox" name="hoge" id="item06" />
        <label for="item06">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
    </div>
    <div class="center">
      <p id="num">6</p>
    </div>
    <div class="button center">
      <button id="btn" class="lock">
        送信
      </button>
    </div>
  </body>
  <style>
    .center {
      text-align: center;
    }
    button {
      background: #fff;
      border: solid 1px #000;
      padding: 8px 32px;
      border-radius: 20px;
    }
    .lock {
      background: #bbb !important;
    }
    .warap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .item {
      width: 31%;
      margin: 0 1%;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      text-align: center;
      border-radius: 10px;
    }
    input[type="checkbox"] {
      display: none;
    }
    input[type="checkbox"] + label {
      display: none;
      cursor: pointer;
      display: inline-block;
      position: relative;
    }
    input[type="checkbox"] + label::before {
      content: "";
      position: absolute;
      display: block;
      box-sizing: border-box;
      width: 24px;
      height: 24px;
      margin-top: -10px;
      right: 10px;
      top: 20px;
      background-color: blue;
      border-radius: 50%;
    }
    input[type="checkbox"]:checked + label::before {
      background-color: blue;
    }

    input[type="checkbox"]:checked + label::after {
      content: "";
      position: absolute;
      display: block;
      box-sizing: border-box;
      width: 13px;
      height: 7px;
      margin-top: 0px;
      top: 17px;
      right: 15px;
      transform: rotate(-45deg);
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
      background-color: blue;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $("input[type=checkbox]").click(function () {
      var $count = $("input[type=checkbox]:checked").length;
      var $not = $("input[type=checkbox]").not(":checked");
      var btn = $("#btn");
      const residue = -$count + 6;
      $("#num").text(residue);
      if ($count >= 6) {
        $not.attr("disabled", true);
        $not.parent().addClass("active");
        btn.removeClass("lock");
      } else {
        $not.attr("disabled", false);
        $not.parent().removeClass("active");
        btn.addClass("lock");
      }
    });
  </script>
</html>
ブログの投稿ログ
