Bootstrap 4 - Checkbox by pressing one the other is pressed

Question

Bootstrap 4 - Checkbox by pressing one the other is pressed

Navigation

#1 by (7 votes)

1

When using the bootstrap "checkbox". If they are duplicated to have more than one. When you click one, the two are clicked. Why? It seems that some javascript code activates them using their id or name, or something like that? How should you do to use several check boxes with bootstrap and each of them work independently?

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">

  <form action="/action_page.php">
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
      <label class="custom-control-label" for="customCheck">Custom checkbox</label>
      <br>
      <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
      <label class="custom-control-label" for="customCheck">Custom checkbox</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

css bootstrap bootstrap-4

asked by r84 07.12.2018 в 13:21

source

1 answer

Use the same Runnable in two different Threads How to delete bits of an integer?

score 7 · Accepted Answer

First of all, I recommend you read the bootstrap documentation which is simply spectacular, with hitting a read you will avoid this kind of problems!

In your code you have 3 problems.

IDs must be unique in HTML / CSS / JS

The Name attribute (if it is a checkbox ) is also usually unique

The structure of your checkbox does not correspond to the structure of the Bootstrap 4 documentation

How to fix it?

Changing the ID and the Name of one of the checkbox and separate them in different div.custom-control.custom-checkbox

For example

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  <div class="container mt-3">
  <form action="/action_page.php">
    <div class="custom-control custom-checkbox mb-0">
      <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
      <label class="custom-control-label" for="customCheck">Custom checkbox</label>
    </div>
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="customCheck2" name="example2">
      <label class="custom-control-label" for="customCheck2">Custom checkbox</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>