Checkbox (hidden field) causing CSS problem

We are using a template that allows for styled checkboxes. The problem occurs when we render the checkbox. It puts a hidden field before the required <label> tag. If the <label> tag does not come directly after the checkbox it will fail to render.

This is the hidden field the code is adding… <input name="EnableAD" type="hidden" value="false">

This is the non-working result. The hidden input field is rendered before our lablel tag causing it to fail.

<label class="checkbox" for="EnableAD"><input checked="checked" class="ace-switch ace-switch-7" data-val="true" data-val-required="The EnableAD field is required." id="EnableAD" name="EnableAD" type="checkbox" value="true" /> <input name="EnableAD" type="hidden" value="false" /> <span class="required">Enable</span></label>

This is a working result (trying to achieve this output). Notice the hidden input field is not in the label tag.

<label class="checkbox" for="EnableAD"><input checked="checked" class="ace-switch ace-switch-7" data-val="true" data-val-required="The EnableAD field is required." id="EnableAD" name="EnableAD" type="checkbox" value="true" /> <span class="required">Enable</span></label> <input name="EnableAD" type="hidden" value="false" />

So, what we need to find out is how to render or remove the hidden field so our label shows first instead. Any ideas?

[alihassanm62]

@DmitryEfimenko described the solution so well. I’m not using Ace template. But I got the same issue. Just changing + to ~ solved my problem. You guys are superb.

.checkbox-success input[type=checkbox]:checked ~ label::before {
    background-color: #1abc9c;
    border-color: #1abc9c;
}

.checkbox-success input[type=checkbox]:checked ~ label::after {
    border-color: #fff !important;
}

.checkbox input[type=checkbox]:checked ~ label::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 7px;
    display: table;
    width: 4px;
    height: 8px;
    border: 2px solid #adb5bd;
    border-top-width: 0;
    border-left-width: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

[electricmessiah]

The Ace template isn’t free. The fix itself doesn’t involve the code in this repo. If others run into this issue, finding this thread and knowing that the fix lies in the LESS files should provide all the info they need. This little snip might be of use too.

$(function(){
  $('input[type=checkbox],input[type=radio]').after('<span class="lbl" />');
});