Dynamically Toggle Enabled Status of Multiple ComboBoxes Using Classes

[Kevin]

Hello,

Is it possible to dynamically toggle the enabled status of multiple ComboBox widgets at once using a Jquery class selector and iterating the results?  If this is possible, what is the proper way to accomplish this behavior?  My form has multiple ComboBoxes which need to by dynamically enabled or disabled based on user selections.

 

Using UI for MVC (Q3 2016)

My current attempt at this behavior is as follows:

         @(Html.Kendo().ComboBoxFor(Model => Model.InsertStockWeightOption)
          .Placeholder("Select Weight Or Specify")
          .HtmlAttributes(new { style = "width:100%;", @class = "ComboBoxDisableOnStartup", id="TestCombo" })
          .DataSource(source => source.Read("GetStockWeightsForType", "ProjectQuote", new { Type = "Insert" })))

JS Code to disable on document creation:

        $(document).ready(function () {
            $(".ComboBoxDisableOnStartup").each(function (i, box) {  //This code does not function clearly, this is only to convey the attempt to toggle using classes
                var obj = box.data("kendoComboBox");
                obj.enable(false);
            });
            var combobox = $("#TestCombo").data("kendoComboBox");  //This code is from the documentation and works for a single ComboBox with an ID
            combobox.enable(false);
        });

[Peter Milchev]

Hello Kevin,

You should use the input element with "data-role" attribute to get the ComboBox widget. Here is a Dojo example implementing the enabling/disabling of ComboBoxes with given class.

$("#disable").click(function () {
    $(".ComboBoxDisableOnStartup [data-role]").each(function (i, box) {
        $(box).data('kendoComboBox').enable(false);
    });
});

Regards,
Peter Milchev
Telerik by Progress