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:

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

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