HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery .hasClass form guard</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 360px; }
    .terms {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
    }
    .terms.checked { border-color: #16a34a; background: #f0fdf4; }
    button { margin-top: 12px; padding: 10px 18px; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    #msg { margin-top: 10px; color: #64748b; font-size: 14px; }
  </style>
</head>
<body>
  <div class="terms" id="terms">
    <span>&#9744;</span>
    <span>I agree to the terms</span>
  </div>
  <button type="button" id="submit" disabled>Submit</button>
  <p id="msg">Accept terms to enable Submit.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    function syncSubmit() {
      var ok = $("#terms").hasClass("checked");
      $("#submit").prop("disabled", !ok);
      $("#msg").text(ok ? "Ready to submit." : "Accept terms to enable Submit.");
    }
    $("#terms").on("click", function() {
      $(this).toggleClass("checked");
      $(this).find("span").first().text($(this).hasClass("checked") ? "☑" : "☐");
      syncSubmit();
    });
    syncSubmit();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .hasClass() — enable submit when checked (Try It)