Unable to disable an icon

Webix JS
1

I have an icon that I want to disable after a certain set of javascript statements are ran. However after using the disable() command the icons are not disabled.
Below is the specific icon:

view:"icon", icon:"calendar", id:"cell", width:50, height:50,
                    click:"widget_type = 'calendar'; makeWidget(); $$('widget_select').hide();"

and this is where I am trying to disable the icon, this is in a separate file as well:

if (widget_type =="calendar"){
        var node = {
            x: Math.random() * (5 - 1) + 1,
            y: Math.random() * (5 - 1) + 1,
            width: 3,
            height: 4,
            type: widget_type
        };
        serializedData.push(node);
        grid.addWidget($('<div><div class="grid-stack-item-content" id=' + node.type + '></div><div/>'),
            node.x, node.y, node.width, node.height);
        loadCalendar();
        $$('cell').disable();
    }

I also have used isEnabled() after the statement above and it will say that the icon is disabled, but the icon does not grey out at all.
Any help is appreciated and I will gladly provide more code upon request.

2

I actually just figured out one major issue. So I hide the widget that the icon is in after the icon is clicked, this seems to negate disabling the icon. Is there a work around for that or should I just find a way to hack around having to deal with that?

3

this seems to negate disabling the icon

AFAICS, the default behavior and styling are correct. You can test it here:

http://webix.com/snippet/0020c755

Thus, is there any additional css? For example, a simple!important notation will overwrite thedisabled:

  .webix_icon {
  	color:#fff !important;
  }
4

Thank you! It turns out I was actually closing the entire widget so I guess that’s why it was resetting. I implemented the solution you posted and it works perfectly, thank you!