2016-12-09 5 views
2

私はhttp://davidstutz.github.io/bootstrap-multiselect/を使用しています。私は自分のチェックボックス(http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/)をスタイルしたかったのですが、何らかの理由でそれを必要なhtml構造に変更できません。ブートストラップマルチセレクションのための素晴らしいブートストラップチェックボックス

デフォルトのブートストラップ複数選択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> 

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

}); 

私はここからこれを得た:私は構造変更したいですか

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

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

答えて

5

彼らはクラス.checkboxを使用ボックスので、あなたはブートストラップ・複数選択のCSSと恐ろしいチェックボックスのCSS間の競合を持っているように思えます。 Awesome Checkboxクラスを他のものに変更してみてください。デフォルトのブートストラップ・複数選択マークアップ、上記テンプレートの作品をもとに

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

:ワーキングテンプレート構造

。基本的にはaタグを追加するだけです。

私はまた、次のようにブートストラップ・複数選択に対応するために.checkbox labelルールを変更する必要がありました:

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>

+0

恐ろしい答えvanburen ...のように働く魅力。このために多くのありがとう。 –

+0

こんにちはvanburen ... $ .ajax経由でオプションを読み込んで複数選択を再構築すると、html構造は必要に応じて変更されません。なぜそういう考え? –

関連する問題