Checkboxlist with textbox displayed in dropdownlist style angularjs

Question

User2108892867 posted

Hello everyone, I have this requirement that I need a dropdown list that allows multiple selection as well as a textbox to enter quantity for each check. In a way it's checkboxlist with a textbox next to each checkbox. The textbox is disabled until the checkbox next to it is checked.

I can create that just fine. But the problem is when there are many items and list is too long. So I need the checkboxlist to be displayed in a dropdown list style.  The dropdown list is similar to this one:

https://angular-ui.github.io/ui-select/demo-multiple-selection.html

Any ideas how this can be done? 

Thanks. 

Answer 1

User2108892867 posted

After some searching, I found bootstrap multiselect is very close to what I want to do :

https://github.com/davidstutz/bootstrap-multiselect

But there seems no way I can have a textbox next to each item. Anybody could help?

Answer 2

User61956409 posted

Hi asplearning,

After some searching, I found bootstrap multiselect is very close to what I want to do :

https://github.com/davidstutz/bootstrap-multiselect

But there seems no way I can have a textbox next to each item. Anybody could help?

In [bootstrap-multiselect documentation](http://davidstutz.de/bootstrap-multiselect/#templates), we can find that it provides templates option for us to control the generated HTML markup. To append/display a TextBox next to each item, you can refer to the following code sample.

<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="onions">Onions</option>
</select>

<script>
    $(document).ready(function () {
        $('#example-getting-started').multiselect({
            templates: {
                li: '<li><a><label style="display:inline;"></label><input type="text" class="txt_quantity_style" disabled/></a></li>'
            },
            onChange: function (option, checked) {
                if (checked) {
                    var input_id = "input[id='" + $(option).val() + "_quantity']";
                    $(input_id).removeAttr("disabled");
                } else {
                    var input_id = "input[id='" + $(option).val() + "_quantity']";
                    $(input_id).prop("disabled", true);
                }
            }
        });

        $("ul.multiselect-container li a label.checkbox").each(function (index) {
            $(this).next("input[type='text']").prop("id", $(this).attr("title").toLowerCase() + "_quantity");
        });
    });
</script>

<style>
    .txt_quantity_style{
        color:black;
    }
</style>

Test Result:

With Regards,

Fei Han

Answer 3

User2108892867 posted

Thank you Fei Han for that. That's very helpful. Just wondering if it's possible to display the number next to each selection. so it will display:

Tomatoes 12 Mangoes 2 and so on. 

Answer 4

User61956409 posted

Hi asplearning,

Thank you Fei Han for that. That's very helpful. Just wondering if it's possible to display the number next to each selection. so it will display:

Tomatoes 12 Mangoes 2 and so on. 

Based on your requirement, I updated the code, please refer to it.

<script>
    $(document).ready(function () {
        $('#example-getting-started').multiselect({
            templates: {
                li: '<li><a><label style="display:inline;"></label><input type="text" class="txt_quantity_style" disabled/></a></li>'
            },
            onChange: function (option, checked) {
                var input_id = "input[id='" + $(option).val() + "_quantity']";
                if (checked) {
                    
                    $(input_id).removeAttr("disabled");
                } else {
                    $(input_id).prop("disabled", true);
                }
            }
        });

        $("ul.multiselect-container li a label.checkbox").each(function (index) {
            $(this).next("input[type='text']").prop("id", $(this).attr("title").toLowerCase() + "_quantity");
        });

        $("input.txt_quantity_style").bind("blur", function () {

            var txt_n = $(this).val();

            Resetselectedtext();
        })
    });

    function Resetselectedtext() {
        var res = "";

        var txt_st = $("button.multiselect").prop("title");

        $("ul.multiselect-container li.active").each(function () {
            var n = $(this).find("input[type='text']").val() == "" ? 0 : parseFloat($(this).find("input[type='text']").val());
            res += $(this).find("label").prop("title") + " " + n + ",";
        });
        
        $("span.multiselect-selected-text").text(res);
    }
</script>

Test Result:

Besides, if you have further question/feedback about customized functionalities with bootstrap-multiselect, you can create issue to report it on github.

https://github.com/davidstutz/bootstrap-multiselect/issues 

With Regards,

Fei Han