Попытка заставить CSS-переключатель работать с рендерингом ASP.NET

Question

Я пытаюсь получить CSS-переключатели для работы с рендерингом ASP.NET.

Способ структурирования CSS-переключателя и рендеринга ASP.NET делает это трудным для меня, чтобы он работал, и проблема не только в диапазоне, генерируемом вокруг ввода, но и в ярлыке - что мне нужно обязательно - для флажка, когда я удаляю их из обработанного 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> 

Here is an Example

вот как мой блокнот закодирован в моем 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

Я нашел решение и хотел поделиться.

Как показано в this jsFiddle example, который использует код, похожий на обработанные в ASP.NET флажках, проблема заключалась в выборе селекторов CSS и в том, как добраться до родителя, у которого есть дочерний флажок с отмеченным или непроверенным .. это не применимы еще в CSS. Я должен добавить функцию JQuery и изменить селекторы в моем CSS, чтобы достичь this jsFiddle result

$(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'); 
      } 
     }); 
});