Question

我正在使用bootstrap-switch（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-label="<i class='fa fa-unlock'></i>" data-off-label="<i class='fa fa-lock'></i>"/>

旧版本：

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

init bootstrapSwitch

1,2,5,6,9
1,2
3,11

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，它是基于bootstrap的：

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

动态添加bootstrap-switch（带图标）但不起作用

3 个答案: