Bootstrap Checkbox is not working properly

Question

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

Not sure but its look like an outline, it's not recommend to remove him cause of accessibility property but you can try on css : outline: 0; — Pik_at, Feb 20 '15 at 14:39
If that is only an outline, I want to have that working as check box. the working check box in 2nd example looks so ugly. (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) — Simple Fellow, Feb 20 '15 at 14:43
http://plnkr.co/edit/nhbdZzvX6eZffDXoIAB5?p=preview doesn't look like your example. — dfsq, Feb 20 '15 at 14:48
this is all i could find for you after digging in the source: https://github.com/TalksLab/metro-bootstrap — Simple Fellow, Feb 20 '15 at 14:49
Here's some nice styles if they help: http://cssdeck.com/labs/css-checkbox-styles — Austin Collins, Feb 20 '15 at 14:51

score 8 · Answer 1 · edited Dec 24 '18 at 09:51

8

<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

edited Dec 24 '18 at 09:51

Pradeep

9,667
13
27
34

answered Oct 05 '17 at 19:46

broswilli

307
2
5

score 5 · Answer 2 · answered Feb 20 '15 at 15:16

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

score 4 · Answer 3 · answered Feb 20 '15 at 14:50

4

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.

answered Feb 20 '15 at 14:50

Austin Collins

439
3
13

score 1 · Answer 4 · edited Oct 23 '20 at 06:21

1

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>

edited Oct 23 '20 at 06:21

Martijn Pieters

1,048,767
296
4,058
3,343

answered Oct 22 '20 at 13:31

Muhammad Khawar

11
2

score 0 · Answer 5 · answered Jan 20 '21 at 13:52

0

  <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>

answered Jan 20 '21 at 13:52

shivangi

1

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – jasie Jan 20 '21 at 14:24

score 0 · Answer 6 · answered Mar 08 '22 at 09:39

0

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;
}

answered Mar 08 '22 at 09:39

Goalsurfer

1
1

Bootstrap Checkbox is not working properly

6 Answers6

Linked