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

当我尝试将自举开关库用于复选框时，如果该复选框放置在<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();

输出量

最佳答案

尝试转义特殊字符并关闭</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