web-dev-qa-db-ja.com

Bootstrapドロップダウンチェックボックスを選択

bootstrapドロップダウンをチェックボックスでカスタマイズしようとしています。ドロップダウンからチェックボックスを選択すると、ラベル名を入力ドロップダウンに「; 'dropdownが閉じられたときのアップロードされた写真のように。

フィドルの例 です。

enter image description here

javascriptjqueryhtmlcsstwitter-bootstrap
26
BurebistaRuler

最もエレガントなソリューションではありません-おそらくこれをいくぶん改良したいと思うでしょうが、これはあなたを始めるかもしれません：

$(document).ready(function() {
    $("ul.dropdown-menu input[type=checkbox]").each(function() {
        $(this).change(function() {
            var line = "";
            $("ul.dropdown-menu input[type=checkbox]").each(function() {
                if($(this).is(":checked")) {
                    line += $("+ span", this).text() + ";";
                }
            });
            $("input.form-control").val(line);
        });
    });
});
16
series0ne

私はそれが古い質問であることを知っていますが、それでも、このライブラリを使用してalmost（あなたが尋ねた正確な設計を除く）あなたが望むことを行うことができます http://davidstutz.github.io/bootstrap-multiselect/#getting-started

10
David Létourneau

次のコードはBootstrap 4.1で機能します。ホバーでメニューを表示する機能を追加した場合、<li>をクリックするとチェックボックスがクリック不可になります。より良い解決策を持っている人は誰でも提供してください。

<ul class="dropdown-menu dropdown-menu-form">
  <li><label class="checkbox"><input type="checkbox">One</label></li>
  <li><label class="checkbox"><input type="checkbox">Two</label></li>
</ul>

そして、これらのJSコードを追加します：

// Allow Bootstrap dropdown menus to have forms/checkboxes inside, 
// and when clicking on a dropdown item, the menu doesn't disappear.
$(document).on('click', '.dropdown-menu.dropdown-menu-form', function(e) {
  e.stopPropagation();
});

[〜＃〜] update [〜＃〜]

以下のコードは正常に機能していますが、チェックボックスイベントが2回発生するため、onchangeではなくonclickイベントを選択する必要がありました。

<ul class="dropdown-menu dropdown-menu-form">
  <li><label class="checkbox"><input type="checkbox" onchange="some()">One</label></li>
  <li><label class="checkbox"><input type="checkbox" onchange="some()">Two</label></li>
</ul>

次のjqueryコード：

$(document).on('click', '.dropdown-menu', function (e) {
    e.stopPropagation();
});
2
Samim