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.

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

Journal

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; – Damson

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. (dfc-e.com/metiers/multimedia/opensource/jqtransform) – Journal

Can you add CSS styles you are using? – Mycobacterium

they are standard bootstrap styles, aren't they? – Journal

plnkr.co/edit/nhbdZzvX6eZffDXoIAB5?p=preview doesn't look like your example. – Mycobacterium

this is all i could find for you after digging in the source: github.com/TalksLab/metro-bootstrap – Journal

Here's some nice styles if they help: cssdeck.com/labs/css-checkbox-styles – Potation

I want something bootstrap-ish – Journal

Answer 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

Bakunin

Answer 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

Sarcomatosis

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

Potation

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

Unanimous

Answer 5

The user experience is greatly improved if the checkbox is included within the label

<div class="checkbox">
    <label class="checkbox-label">
        1.-<input type="checkbox" class="form-check-input"/>
        Option 2
    </label>
</div>

Triplicate

Answer 6

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

Widely

Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation 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. – Alti

Answer 7

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

Reflexion

why wordpress, i don't use wordprpess – Journal