Bootstrap多选框的精美样式:Awesome Bootstrap Checkboxes

4
我正在使用 http://davidstutz.github.io/bootstrap-multiselect/,我想要为我的复选框(http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/)设置样式...但由于某种原因,我无法将其更改为所需的HTML结构。
默认的Bootstrap Multiselect HTML:
<ul class="multiselect-container dropdown-menu">
    <li class="active">
        <div class="checkbox">
            <label class="checkbox">
                <input value="AD" type="checkbox"> Andorra (AD)
            </label>
        </div>
    </li>
    ...

这就是应该的方式,例如。
<ul class="multiselect-container dropdown-menu">
    <li class="active">
        <div class="checkbox">
            <input id="multiselect-0" value="vikings" type="checkbox">
            <label class="checkbox" for="multiselect-0"> Minnesota Vikings</label>
        </div>
    </li>

这是我初始化它的方式:
$('.test-select').multiselect({
    templates: { // Use the Awesome Bootstrap Checkbox structure
        li: '<li><div class="checkbox"><label></label></div></li>'
    }   
});

这就是我想要改变结构的方式:
$('.multiselect-container div.checkbox').each(function (index) {

    var id = 'multiselect-' + index,
        $input = $(this).find('input');

    $(this).find('label').attr('for', id);  
    $input.attr('id', id);

    $input.detach();

    $input.prependTo($(this));

    $(this).click(function (e) {
        e.stopPropagation();
    });

}); 

我从这里得到了这个: http://jsfiddle.net/natearmagost/aznvcLps/ 有人知道为什么它在我的电脑上不能工作,或者有没有其他的方法可以做到?下面的解决方案有效,但是如果我通过$.ajax get加载选项并重新构建多选框,它就不起作用了。有人知道为什么吗?
$.ajax({
type: 'GET',
url: '/country.php',
dataType: 'json',
success: function(data) {
     $.each(data.data, function (i, item) {
         display = item.display;
         $('.select-country').append('<option value="' + display + '">(' + display + ')</option>');
         //console.log(item)
    });
    $('.select-country').multiselect('rebuild');
}
});
1个回答

11

看起来你在 Bootstrap-Multiselect CSS 和 Awesome Checkbox CSS 之间存在冲突,因为它们都使用了类 .checkbox。尝试将 Awesome Checkbox 类更改为其他名称。

工作模板结构:

<li>
  <a tabindex="0">
    <div class="aweCheckbox aweCheckbox-danger">
      <label for=""></label>
    </div>
  </a>
</li>

基于默认的Bootstrap-Multiselect标记,上面的模板可以工作。基本上只需要在其上添加a标签即可。

我还必须修改.checkbox label规则以适应Bootstrap-Multiselect,具体如下:

padding: 0 20px 0 10px; cursor: pointer;

工作示例:

$(document).ready(function() {
  $('select').multiselect({
    templates: { // Use the Awesome Bootstrap Checkbox structure
      li: '<li class="checkList"><a tabindex="0"><div class="aweCheckbox aweCheckbox-danger"><label for=""></label></div></a></li>'
    }
  });
  $('.multiselect-container div.aweCheckbox').each(function(index) {

    var id = 'multiselect-' + index,
      $input = $(this).find('input');

    // Associate the label and the input
    $(this).find('label').attr('for', id);
    $input.attr('id', id);

    // Remove the input from the label wrapper
    $input.detach();

    // Place the input back in before the label
    $input.prependTo($(this));

    $(this).click(function(e) {
      // Prevents the click from bubbling up and hiding the dropdown
      e.stopPropagation();
    });

  });
});
body {
  padding: 20px;
}
form {
  max-width: 500px;
  margin: auto;
}
.aweCheckbox {
  padding-left: 20px;
}
.aweCheckbox label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding: 0 20px 0 10px;
  cursor: pointer;
}
.aweCheckbox 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;
}
.aweCheckbox 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;
}
.aweCheckbox input[type="checkbox"] {
  opacity: 0;
  z-index: 1;
}
.aweCheckbox input[type="checkbox"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.aweCheckbox input[type="checkbox"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";
}
.aweCheckbox input[type="checkbox"]:indeterminate + label::after {
  display: block;
  content: "";
  width: 10px;
  height: 3px;
  background-color: #555555;
  border-radius: 2px;
  margin-left: -16.5px;
  margin-top: 7px;
}
.aweCheckbox input[type="checkbox"]:disabled + label {
  opacity: 0.65;
}
.aweCheckbox input[type="checkbox"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed;
}
.aweCheckbox.aweCheckbox-circle label::before {
  border-radius: 50%;
}
.aweCheckbox.aweCheckbox-inline {
  margin-top: 0;
}
.aweCheckbox-danger input[type="checkbox"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f;
}
.aweCheckbox-danger input[type="checkbox"]:checked + label::after {
  color: #fff;
}
.aweCheckbox-danger input[type="checkbox"]:indeterminate + label::before {
  background-color: #d9534f;
  border-color: #d9534f;
}
.aweCheckbox-danger input[type="checkbox"]:indeterminate + label::after {
  background-color: #fff;
}
input[type="checkbox"].styled:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f00c";
}
input[type="checkbox"] .styled:checked + label::before {
  color: #fff;
}
input[type="checkbox"] .styled:checked + label::after {
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet" />

<form>
  <div class="form-group">
    <select name="teams" id="teams" multiple="multiple" class="form-control">
      <option value="vikings">Minnesota Vikings</option>
      <option value="packers">Green Bay Packers</option>
      <option value="lions">Detroit Lions</option>
      <option value="bears">Chicago Bears</option>
      <option value="patriots">New England Patriots</option>
      <option value="jets">New York Jets</option>
      <option value="bills">Buffalo Bills</option>
      <option value="dolphins">Miami Dolphins</option>
    </select>
  </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>


vanburen 的回答太棒了,非常好用。非常感谢你。 - Philipp M
嗨vanburen...如果我通过$.ajax get加载选项并重建多选框...HTML结构不会按要求更改。有任何想法为什么会这样? - Philipp M
我采用了一个想法——现在使用Bootstrap 4自定义复选框模板,而不是添加自定义CSS。 - shalini

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接