Search code examples
comboboxbootstrap-multiselect

Combo box with multiple checkbox in bootstrap

In bootstrap how to use comboBox with multiple checkbox option as in the attached image.

I used multiple checkbox option in dropdown list as below, but i do not wish drop down list with checkbox, instead wish to have like the image attached.

<select multiple="multiple"> .... </select>

enter image description here

Solution

  • From the below way i got the solution

    <table>
                            <tr>
                                <td>
                                    <div
                                        style="max-height: 350px; overflow-y: scroll; width: 375px;background: white;"
                                        class="scrollbar style-2">
                                        <table class="table">
                                            <thead align="center">
                                                <tr>
                                                    <th style="text-align: center;background: #5cb85c;color : white;">List</th>
                                                    <th style="background: white;background: #5cb85c;color : white;"></th>
                                                </tr>
                                            </thead>
                                            <tbody style="background: white;">
                                            <%
                                                for (int i = 0; i < 10; i++) {
                                            %>
                                                <tr style="border: 0">
                                                <td style="border: 0">
                                                    <div class="[ form-group ]">
                                                        <input type="checkbox" name="fancy-checkbox-default_p3_ii<%=i%>"
                                                            id="fancy-checkbox-default_p3_ii<%=i%>" autocomplete="off" />
                                                        <div class="[ btn-group ]">
                                                            <label for="fancy-checkbox-default_p3_ii<%=i%>"
                                                                class="[ btn btn-success ]" style="top: 5px;"> <span
                                                                class="[ glyphicon glyphicon-ok ]"></span> <span> </span>
                                                            </label> <label for="fancy-checkbox-default_p3_ii<%=i%>"
                                                                class="[ btnCustom active ]"> Default Checkbox<%=i%>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <%
                                                }
                                            %>
                                            </tbody>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </table>