'Bootstrap Checkbox is not working properly

I'm using the following mark up and styles (Bootstrap). It shows my checkbox but it is paralysed, that is, it cannot be checked. here is my mark up: I want something more Bootstrap-ish. I know there are other options to make the checkbox look fancy but that do not solve the problem.

<div class="form-group">
  <div class="checkbox">
    1.
    <input type="checkbox" name="options" id="chk2" />
    <label class="checkbox-label">Option 2</label>
  </div>
</div>

Here is how it looks.

checkbox not working

What exactly is the issue? If I put the input element inside label I get this ugly thing:

enter image description here

htmlcsstwitter-bootstrap


Solution 1:[1]

<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>

The problem is with your label. The for attribute must match with the name attribute of your label

Solution 2:[2]

Looks need to tweak bootstrap styling for custom checkbox.

Check this

HTML

<div class="form-group">
    <div class="checkbox">
        <label for="check">
            <input type="checkbox" id="check"/>
            <span class="fake-input"></span>
            <span class="fake-label">Option 2</span>
        </label>
    </div>
</div

CSS

.fake-input {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #9f9f9f;
    background: #fff;
    vertical-align: middle;
    position: relative;
    margin-right: 10px;
    border-radius: 4px;
}
input[type="checkbox"] {
    position: fixed;
    top: -9999px;
    left: -9999px;
}
input[type="checkbox"]:checked + .fake-input:before {
    content:"\2713";
    position: absolute;
    color: #000;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Check in Fiddle

Solution 3:[3]

Reading around it looks like you have to style the checked version and the unchecked version.

input[type=checkbox]:checked {

}

Styling with this tag should solve your problems.

Solution 4:[4]

Use "for" attribute to solve this issue.

<div class="form-group">
  <div class="checkbox">
    1.
    <input type="checkbox" name="options" id="chk2" />
    <label for="chk2" class="checkbox-label">Option 2</label>
  </div>
</div>

Solution 5:[5]

  <div class="col-md-3">
            <input class="form-check-input" type="checkbox" id="" asp-for="">
            <label class="form-check-label" for="" asp-for="">
            </label>
        </div>

Solution 6:[6]

It's not due to Bootstrap but to Wordpress. The checkboxes became visible after I added "display:block;" to the css of the checkbox input tag.

<input class="form-check-input" type="checkbox" id="">

input.form-check-input {
display:block;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pradeep
Solution 2 raju
Solution 3 Austin Collins
Solution 4 Martijn Pieters
Solution 5 shivangi
Solution 6 Goalsurfer

Related Questions