Hi Guys
I have created custom checkbox in asp.net mvc 4 project, that working fine, but when custom checkbox used on model popup window, that not work. please help me!
Custom checkbox css as below
.ckbox
{
width: 25px;
height: 25px;
}
.custom-checkbox
{
position: relative;
display: inline-block;
}
.custom-checkbox > .box
{
position: relative;
display: block;
width: 25px;
height: 25px;
background-color: #FFF;
padding: 0px;
margin: 0px;
}
.custom-checkbox > .box > .tick
{
position: absolute;
left: 4px;
top: 7px;
width: 14px;
height: 6px;
border-bottom: 4px solid #000;
border-left: 4px solid #000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
display: none;
}
.custom-checkbox > input:checked + .box > .tick
{
display: block;
}
.custom-checkbox > input
{
position: absolute;
outline: none;
left: 0;
top: 0;
padding: 0;
width: 25px;
height: 25px;
border: none;
margin: 0;
opacity: 0;
z-index: 1;
}
custome checkbox code
<table>
<tr>
<td class="td_user">
<span class="custom-checkbox">
<input type="checkbox" id="chkPermissionIsUsers@(Model.UserID)" name="chkPermissionIsUsers@(Model.UserID)" class="ckbox"
checked="@(pages != null && pages.Count(m => m.PageID == 1) > 0)" onclick = "onPermissionChanged(@Model.UserID,'Users', this.checked)"/>
<span class="box"><span class="tick"></span></span></span>
<label class="lblFontStyle" for="chkPermissionIsUsers@(Model.UserID)" style="vertical-align: super;">
Users
</label>
</td>
</table>
Model popup
Model popup code used by below URL
https://www.mindstick.com/Articles/1117/crud-operation-using-modal-dialog-in-asp-dot-net-mvc
Thanks
AVADHESH PATEL
02-Mar-2013Hi Pravesh!
Changed custom checkbox z-index 1 to 99999 or replace custom-checkbox > input class from below class
.custom-checkbox > input
{
position: absolute;
outline: none;
left: 0;
top: 0;
padding: 0;
width: 25px;
height: 25px;
border: none;
margin: 0;
opacity: 0;
z-index: 99999;
}
I hope it resolve your problem