在<li>元素中时出现Bootstrap Checkbox-Switch CSS问题

Question

当我尝试对复选框使用引导程序开关库时，如果将复选框放置在<li>标记之外的其他位置，则可以正常使用。如果我将复选框放在<li>标记内，它将无法正常工作。

在下面添加代码段。任何帮助将不胜感激。

HTML

<li>
    <div class="mt-comment-actSwitch">
        <input type="checkbox" name="publishCheckBox" 
               data-on-text="<i class='fa fa-check'></i>" 
               data-off-text="<i class='fa fa-times'></i>" 
               class="make-switch publishCheckBox" 
               data-size="mini" data-on-color="success" data-off-color="warning">
    </div>
</li>
<br><br>
<div class="mt-comment-actSwitch">
        <input type="checkbox" name="publishCheckBox" 
               data-on-text="<i class='fa fa-check'></i>" 
               data-off-text="<i class='fa fa-times'></i>" 
               class="make-switch publishCheckBox" 
               data-size="mini" data-on-color="success" data-off-color="warning">
</div>

JS

$('.publishCheckBox').bootstrapSwitch();

输出

Answer 1

尝试转义特殊字符并关闭 </input> 标签：

<li>
  <div class="mt-comment-actSwitch">
    <input type="checkbox" name="publishCheckBox" 
    data-on-text="&lt;i class='fa fa-check'&lt;&lt;/i&lt;" 
    data-off-text="&lt;i class='fa fa-times'&lt;&lt;/i&lt;" 
    class="make-switch publishCheckBox" 
    data-size="mini" data-on-color="success" data-off-color="warning"></input>
  </div>
</li>
<br><br>
<div class="mt-comment-actSwitch">
  <input type="checkbox" name="publishCheckBox" 
         data-on-text="&lt;i class='fa fa-check'&lt;&lt;/i&lt;" 
         data-off-text="&lt;i class='fa fa-times'&lt;&lt;/i&lt;" 
         class="make-switch publishCheckBox" 
         data-size="mini" data-on-color="success" 
         data-off-color="warning"></input>
</div>

参考：

• http://www.javapractices.com/topic/TopicAction.do?Id=96