Awesome Bootstrap Checkboxen für Bootstrap Multiselect

Question

Ich benutze http://davidstutz.github.io/bootstrap-multiselect/ und ich wollte meine Kontrollkästchen (http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/) stylen ... ABER aus irgendeinem Grund kann ich es nicht ändern, um die erforderliche HTML-Struktur.

Der Standard 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> 
    ... 

Das ist, wie sollte es zum Beispiel sein,

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

Das ist, wie ich es initialisieren:

$('.test-select').multiselect({ 
    templates: { // Use the Awesome Bootstrap Checkbox structure 
     li: '<li><div class="checkbox"><label></label></div></li>' 
    } 
}); 

Das ist, wie ich die Struktur ändern wollte:

$('.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(); 
    }); 

}); 

ich das von hier bekam: http://jsfiddle.net/natearmagost/aznvcLps/ jemand eine Idee, warum könnte es nicht arbeite an meiner Seite oder eine Alternative wie?

Die untenstehende Lösung funktioniert, aber leider noch nicht, wenn ich die Optionen via $ .ajax lade und den Multiselect neu aufbaue. Jemand eine Idee warum?

$.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'); 
} 
}); 

Answer 1

Scheint, wie Sie Konflikte zwischen dem Bootstrap-Multiselect CSS und der Super Checkbox CSS haben, da sie die Klasse .checkbox verwenden boxen. Versuchen Sie, die Awesome Checkbox-Klasse in etwas anderes zu ändern.

Arbeits Template-Struktur:

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

Basierend auf dem Standard-Bootstrap-Multiselect-Markup, das obige Template funktioniert. Fügen Sie einfach nur das a Tag hinzu.

Ich hatte auch die .checkbox label Regel ändern Bootstrap-Multiselect mit folgendem aufzunehmen:

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

Arbeitsbeispiel:

$(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>