how to make checkbox ticked necessary to submit in Bootstrap-CodePudding

I am building Bootstrap’s form, where I want users only submit once the checkbok is ticked (checked).

<form>
  <div >
    <label for="exampleInputEmail1">Email address</label>
    <input type="email"  id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" >We'll never share your email with anyone else.</small>
  </div>
  <div >
    <label for="exampleInputPassword1">Password</label>
    <input type="password"  id="exampleInputPassword1" placeholder="Password">
  </div>
  <div >
    <input type="checkbox"  id="exampleCheck1">
    <label  for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" >Submit</button>
</form>

CodePudding user response：

// Check document.getElementById("exampleCheck1").checked = true;

// Uncheck document.getElementById("exampleCheck1").checked = false;

CodePudding user response：

You can add disabled property to button and control it by checkbox

here's full code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>

<div >
  <form>
    <div >
      <label for="exampleInputEmail1">Email address</label>
      <input type="email"  id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" >We'll never share your email with anyone else.</small>
    </div>
    <div >
      <label for="exampleInputPassword1">Password</label>
      <input type="password"  id="exampleInputPassword1" placeholder="Password">
    </div>
    <div >
      <input type="checkbox"  id="exampleCheck1" onchange="document.getElementById('exampleButton1').disabled = !this.checked;">
      <label  for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit"  id="exampleButton1" disabled>Submit</button>
  </form>
</div>
</body>
</html>