动态添加bootstrap-switch (带有图标)但不起作用

Question

我使用的是引导开关(http://www.bootstrap-switch.org/)，并且我想使用图标而不是文本来切换；我添加的内容是通过ajax调用和.HTML属性动态添加的；我尝试了以下代码，该代码通过HTML属性传递，但它显示的不是图标，而是

<span class='icon-remove'></span>

我的代码：

<input type='checkbox' checked id='chkAll_tab3' name='chkAll_tab3' class='switch switch-success' data-label-on=\"<span class='icon-remove'></span>\" data-label-off='Archieve' />

你知道我怎么才能修好吗？

如果你需要更多的澄清，请让我知道！

谢谢

Answer 1

到最新版本：

<input class="make-switch" type="checkbox" data-on-text="<i class='fa fa-unlock'></i>" data-off-text="<i class='fa fa-lock'></i>"/>

对于旧版本：

<input class="make-switch" type="checkbox" data-on-label="<i class='fa fa-unlock'></i>" data-off-label="<i class='fa fa-lock'></i>"/>

初始化bootstrapSwitch

<script>
 $(".make-switch").bootstrapSwitch();
</script>

Answer 2

下面是用Bootstrap实现复选框和单选按钮UI的简单和最佳概念。不需要做更多的事情，只需要使用下面的代码来实现：

  <div class="checkbox">
                    <input id="checkbox1" type="checkbox">
                    <label for="checkbox1">
                        Default
                    </label>
                </div>
                <div class="checkbox checkbox-primary">
                    <input id="checkbox2" type="checkbox" checked="">
                    <label for="checkbox2">
                        Primary
                    </label>
                </div>
                <div class="checkbox checkbox-success">
                    <input id="checkbox3" type="checkbox">
                    <label for="checkbox3">
                        Success
                    </label>
                </div>

在基于引导的css文件中添加自定义css：

     .checkbox {
  padding-left: 20px; }
  .checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
    .checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555; }
  .checkbox input[type="checkbox"] {
    opacity: 0; }
    .checkbox input[type="checkbox"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .checkbox input[type="checkbox"]:checked + label::after {
      font-family: 'FontAwesome';
      content: "\f00c"; }
    .checkbox input[type="checkbox"]:disabled + label {
      opacity: 0.65; }
      .checkbox input[type="checkbox"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }
  .checkbox.checkbox-circle label::before {
    border-radius: 50%; }
  .checkbox.checkbox-inline {
    margin-top: 0; }

.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #428bca;
  border-color: #428bca; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-danger input[type="checkbox"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f; }
.checkbox-danger input[type="checkbox"]:checked + label::after {
  color: #fff; }

我希望这将帮助你做更多写更少:-)更多的例子，你可以通过点击这个链接找到：http://bootsnipp.com/snippets/ZkMKE

Answer 3

您需要使用div而不是input

你有没有考虑过http://www.bootstrap-switch.org/#html-text-label-icon？

<div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">