我正在使用 http://davidstutz.github.io/bootstrap-multiselect/,我想要为我的复选框(http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/)设置样式...但由于某种原因,我无法将其更改为所需的HTML结构。
默认的Bootstrap Multiselect HTML:
这就是应该的方式,例如。
这是我初始化它的方式:
这就是我想要改变结构的方式:
我从这里得到了这个: http://jsfiddle.net/natearmagost/aznvcLps/ 有人知道为什么它在我的电脑上不能工作,或者有没有其他的方法可以做到?下面的解决方案有效,但是如果我通过$.ajax get加载选项并重新构建多选框,它就不起作用了。有人知道为什么吗?
默认的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');
}
});