Knockout enable binding doesn't work with kendocombobox

Question

Html.Kendo().ComboBoxFor(m => m.CityId).HtmlAttribute("data-bind", "enable: IsCityEnabled")

combobox is a complex element which consist of more than one element( input, arrow button, invisible input that keeps value) as shown below.the expression above adds binding expression on invisible input element.

<span class="k-widget k-combobox k-header">
<span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default k-state-hover">
    <input name="BankId_input" class="k-input valid" type="text" autocomplete="off" maxlength="524288" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="both" aria-owns="      BankId_listbox" aria-busy="false" aria-activedescendant="BankId_option_selected" aria-invalid="false" style="width: 100%;">
    <span tabindex="-1" unselectable="on" class="k-select">
        <span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1" aria-controls="BankId_listbox">select</span>
    </span>
</span>
<input data-val="true" data-val-number="The field Bank Combo must be a number." id="BankId" name="BankId" no-custom-input="true" data-bind="enable : IsCityReadOnly" type="text" data-role="combobox" aria-disabled="false" aria-readonly="false" style="display: none;" aria-invalid="false" aria-describedby="BankId-error" class="valid">

So changes on model effects only invisible element

I need a generic solution without adding subscribers to knockout model members.

Answer 1

the solution come up with

        var control = $("#" + ControlName).data("kendoComboBox");
        // configuration of the observer:
        var config = { attributes: true, childList: false, characterData: true };
        // create an observer instance
        var observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type === "attributes") {
                    if (mutation.attributeName === "disabled") {
                        control.enable(!mutation.target.disabled);
                        observer.disconnect();
                        observer.observe(control.element[0], config);
                    }
                }
            });
        });
        // pass in the target node, as well as the observer options
        observer.observe(control.element[0], config);