Mouse events not reaching checkbox

[baarden-zz]

I encountered a problem where mouse events were not passing through the pseudoelement to the underlying checkbox. (Firefox 34 and Safari 8 on MacOS 10.10.)

I was able to fix it by adding "pointer-events: none;" to the .checkbox label::before/after selectors. Not sure if this is a good fix, though!

[AlonCG]

I am having something similar happen (w/wo using an icon in the label)... though I have not modified the css yet (may try that tomorrow or so). Here is how the HTML is generated (using a standard checkbox works fine):

<div class="checkbox checkbox-info">
    <input data-val="true" data-val-required="The IsKey field is required." id="TableColumns_1__IsKey" name="TableColumns[1].IsKey" value="true" type="checkbox">
    <input name="TableColumns[1].IsKey" value="false" type="hidden">
    <label for="TableColumns_1__IsKey">Is Key<i class="fa fa-fw fa-key"></i></label>
</div>

The input tag is being generated from an ASP.NET MVC Razor tag, could that be a problem?

[JoelViney]

@AlonCG It doesn't like there being a hidden input with the same name. That is causing it to fail.

[micrum]

This problem fixed simply adding z-index equals 1 to inputs.
Check out Plunker

[swilerdelp]

This issue has not been resolved. I have the most recent version and the checkbox value is not being changed by the mouse click.

[swilerdelp]

Sorry, I am incorrect, I did have a earlier version than the most recent. My apologies.

[mibamur]

@flatlogic reopen it

[rock-walker]

I played with bootstrap checkbox and ASP.NET MVC CheckBoxFor for half a day
and applied solutions with "awesome-bootstrap-checkbox", thoroughly checked every line of code.
That didn't work for me!

As "@Html.CheckBoxFor" appended <input type="hidden" ... /> after checkbox input, the bootstrap checkbox become UNclickable. Unfortunately.

My solution to this problem is next:

1. throw out "@Html.CheckBoxFor" from code and exchange it on classic
   <input type="checkbox" id="cb1" @(Model.SomeBoolProperty ? "checked" : "")/>
<label for "cb1">Text</label>
2. Add to the top of the *.cshtml page asp.net hidden control:
   @Html.HiddeFor(x => x.SomeBoolProperty)
   That control will store your value for a model.
3. And in "Save"/"Post"/"Send" handler in javascript block update Hidden element value from Checkbox element (f.e., using JQuery):
   $('#SomeBoolProperty').val($('#cb1').is(':checked'))
   Thus your model will valid and actual for .NET Controller.