Bootstrap checkbox-switch css issue when inside <li> element

Question

When I try using the bootstrap switch library for checkboxes it works fine if the checkbox is placed inside other than a <li> tag. If I place the checkbox inside a <li> tag it won't work.

Adding the code snippet below. Any help would be appreciated.

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();

Output

Answer 1

Try escape special characters and close </input> tag:

<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>

Reference:

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