Enable/Disable jQuery buttons in Knockout with a Custom Binding Handler

Still working on those jQuery buttons. Trying to update old ASP.Net Webforms using jQuery, Knockout, and Amplify.

New problem today.

I was having problems getting Knockout to enable/disable my jQuery buttons using the Knockout 'enable' bindingHandler. It would enable/disable the underlying element that I had run the .button() method on, but it had no idea about the div that jQuery had wrapped my element in, or how to handle it.

I wrote a custom bindingHandler for Knockout to handle this case. It also can handle non-jQuery elements as well, so you could change the declaration from 'jEnable' to 'enable', and this would work as a all-comers enable function.

Since this method uses jQuery (and is more expensive than the plain old 'enable'), I figured the extra binding was the best approach.

    if (ko && ko.bindingHandlers) {
        ko.bindingHandlers['jEnable'] = { 'update': function(element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                var $element = $(element);
                $element.prop("disabled", !value);
                if ($element.hasClass("ui-button")) {
                    $element.button("option", "disabled", !value);
                }
            }
        };
    }

An example on how to use this:

    <input id="btnToEnable" type="button" data-bind="jEnable: isEnabled" />
    <script>
        $("#btnToEnable").button();
        var viewModel = { isEnabled: ko.observable(true) };
        ko.applyBindings(viewModel);
    </script>

A gist of this code is here.