Bootstrap checkbox-switch css выдает внутри элемента <li> - PullRequest
Новая
       27

Bootstrap checkbox-switch css выдает внутри элемента <li>

1 голос
/ 18 июня 2019

Когда я пытаюсь использовать библиотеку переключателя начальной загрузки для флажков, все работает нормально, если флажок помещен внутри тега <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();

выход

enter image description here

1 Ответ

1 голос
/ 18 июня 2019

Попробуйте экранировать специальные символы и закройте </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>

Ссылка:

...