asp.net mvc razor slip checkbox can not hit to check - asp.net-mvc

Question

I have problem with my View in asp.net mvc project. I added new checkboxFor element on this view:
<div class="col-md-6">
<div class="form-group">
<div class="checkbox clip-check check-primary">
#Html.CheckBoxFor(x => x.IsHomePage)
<label for="isHomePage">
Is Home Page
</label>
</div>
</div>
</div>
And this is my css:
.clip-check {
margin-bottom: 10px;
margin-top: 10px;
padding-left: 0;
}
.clip-check label {
cursor: pointer;
display: inline-block;
font-size: 13px;
margin-right: 15px;
padding-left: 30px !important;
position: relative;
line-height: 23px;
transition: border 0.2s linear 0s, color 0.2s linear 0s;
white-space: nowrap;
}
.clip-check label:before {
background-color: #ffffff;
border: 1px solid #c8c7cc;
content: "";
display: inline-block;
height: 20px;
left: 0;
margin-right: 10px;
position: absolute;
width: 20px;
border-radius: 0;
top: 1px;
transition: border 0.2s linear 0s, color 0.2s linear 0s;
}
.clip-check label:after {
display: inline-block;
font-size: 11px;
height: 19px;
left: 4px;
position: absolute;
top: -1px;
transition: border 0.2s linear 0s, color 0.2s linear 0s;
width: 19px;
}
.clip-check input[type="checkbox"] {
display: none;
}
.clip-check input[type="checkbox"]:checked + label:before {
border-width: 10px;
}
.clip-check input[type="checkbox"]:checked + label:after {
color: #fff;
content: "\f00c";
font-family: "FontAwesome";
}
.clip-check input[type="checkbox"][disabled] + label {
opacity: 0.65;
}
.clip-check input[type="checkbox"][disabled] + label:before {
background-color: #F8F8F8;
}
but after built and check from browser, I am not able to hit to check this checkbox, even I have done successfully with other checkbox as well. I am using bootstrap. Much appreciate to any help, thank you.

Answer 1

I have just checked carefully your css, you wrote everything for label element. You already hided checkbox input and draw the rectangle by css as well. Please see this code:
.clip-check label {
cursor: pointer;
display: inline-block;
font-size: 13px;
margin-right: 15px;
padding-left: 30px !important;
position: relative;
line-height: 23px;
transition: border 0.2s linear 0s, color 0.2s linear 0s;
white-space: nowrap;
}
.clip-check label:before {
background-color: #ffffff;
border: 1px solid #c8c7cc;
content: "";
display: inline-block;
height: 20px;
left: 0;
margin-right: 10px;
position: absolute;
width: 20px;
border-radius: 0;
top: 1px;
transition: border 0.2s linear 0s, color 0.2s linear 0s;
}
.clip-check label:after {
display: inline-block;
font-size: 11px;
height: 19px;
left: 4px;
position: absolute;
top: -1px;
transition: border 0.2s linear 0s, color 0.2s linear 0s;
width: 19px;
}
So if your label is not pointed to exactly the checkbox input with Id is IsHomePage (what will be rendered from asp.net server) then the style will not be changed :after. So your problem here :
<label for="isHomePage">
Please change isHomePage to IsHomePage, because of name of your field is IsHomePage.