尝试使CSS切换器与ASP.NET呈现的复选框配合使用

Question

我正在尝试使CSS开关与ASP.NET呈现的复选框一起使用。

CSS Switcher的结构方式和ASP.NET复选框的呈现使我很难使其正常工作，而且问题不仅在于在输入周围生成的范围内，还包括标签（我确定需要）以进行检查-box，一旦我从呈现的HTML中删除它们，它就会起作用。

当呈现如下时，ASP.NET复选框添加跨度和标签：

<span>
    <input id="ID" type="checkbox" checked="checked" name="ID"></input>
    <label for="ID">Label</label>
</span>

虽然切换台需要以以下形式包装输入：

<label class="switch switch-default">
    <input type="checkbox" checked><span></span>
</label>

这是一个例子

这是我的复选框在ASP HTML中编码的方式

<div class="col-sm-9">
   <label class="switch switch-default"><asp:CheckBox id="chkAdd" runat="server" Text="Add" CssClass=""></asp:CheckBox><span></span></label>
</div>

有没有解决此问题的方法？

Answer 1

我找到了一个解决方案，想分享。

就像在使用与ASP.NET呈现的复选框类似的代码的jsFiddle示例中出现的一样 ，问题出在CSS选择器以及如何到达具有子复选框（带有选中或未选中的子复选框）的父对象。在CSS中。 我必须添加一个jQuery函数并更改CSS中的选择器以达到此jsFiddle结果

    $(document).ready(function () {
        $('.switch input').each(function () {
           var _span = $(this).closest('.switch').children('span.sw-inner');
           if ($(this).is(":checked")) {
                $(_span).addClass('checked').removeClass('un-checked');
            } else {
                $(_span).addClass('un-checked').removeClass('checked');
            }
        });
        $('.switch input').change(function () {
            var _span = $(this).closest('.switch').children('span.sw-inner');
            if ($(this).is(":checked")) {
                $(_span).addClass('checked').removeClass('un-checked');
            } else {
                $(_span).addClass('un-checked').removeClass('checked');
            }
        });
 });