Question

I have the following html:

<span class="buttonSpan" id="btnComplete" data-bind="click: completePage, btnEnabled: isBtnCompleteEnabled">complete</span>  

and here is an exert from my view model:

ko.bindingHandlers.btnEnabled = {
  init: function (element, valueAccessor) {
     var value = valueAccessor();
     $(element).toggle(ko.utils.unwrapObservable(value));
   },
   update: function (element, valueAccessor) {
      var value = valueAccessor();
      ko.utils.unwrapObservable(value) ? $(element).removeClass("buttonDisabled") :                 
       $(element).addClass("buttonDisabled");
    }
 };

 self.isBtnCompleteEnabled = ko.observable(false);

All the CSS does at this point is change the color of the span.

What would cause this to happen?

Thanks

Answer 1

This line in your init

$(element).toggle(ko.utils.unwrapObservable(value));

is adding display: none to your element since value is false.