# Force non-input component to be disabled so style element state triggers?

**URL:** <https://forum.inductiveautomation.com/t/force-non-input-component-to-be-disabled-so-style-element-state-triggers/77792>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 14, 2023, 2:12am UTC](https://forum.inductiveautomation.com/t/force-non-input-component-to-be-disabled-so-style-element-state-triggers/77792 "2023-08-14T02:12:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 14, 2023, 2:12am UTC](https://forum.inductiveautomation.com/t/force-non-input-component-to-be-disabled-so-style-element-state-triggers/77792/1 "2023-08-14T02:12:07Z")

</div>

I have a clickable flex container (it has a mouse click event handler), but I also have an enabled condition on being able to click it, as well as a style class assigned to it. I want to make use of the class' `disabled `element state to display it greyed out rather than having to bind to the style.class to change it to another "disabled" class. Can I force the flex container's enabled condition somehow to do this?

---

<div class="post-metadata">

**Author:** ![Bryson\_Prince](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bryson_prince/32/48866_2.png) [@Bryson\_Prince](https://forum.inductiveautomation.com/u/Bryson_Prince)\
**Post date:** [August 28, 2023, 9:50pm UTC](https://forum.inductiveautomation.com/t/force-non-input-component-to-be-disabled-so-style-element-state-triggers/77792/2 "2023-08-28T21:50:28Z")

</div>

Hi,

Unfortunately, containers cannot use the disabled condition. This link on [The HTML Disabled Attribute](https://www.w3schools.com/tags/att_disabled.asp) explains what types of HTML elements can use the disabled property. The containers in Ignition are div elements, so they cannot use that attribute.

However, you could create a custom property that applies the style class, and add an IF statement to your onClick event that will require the custom property to be in a certain state before it runs any of the code.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 28, 2023, 10:59pm UTC](https://forum.inductiveautomation.com/t/force-non-input-component-to-be-disabled-so-style-element-state-triggers/77792/3 "2023-08-28T22:59:55Z")

</div>

Ah, that makes sense, cheers!

Regarding this part however:

> [@Bryson\_Prince](#):
>
> you could create a custom property that applies the style class, and add an IF statement to your onClick event that will require the custom property to be in a certain state before it runs any of the code.

The `pointer-events: none` style still works here to disable all click actions, so the if condition isn't needed. I'll add this into my "Disabled" P.Style

---

<div class="post-metadata">

**Author:** ![Bryson\_Prince](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bryson_prince/32/48866_2.png) [@Bryson\_Prince](https://forum.inductiveautomation.com/u/Bryson_Prince)\
**Post date:** [August 28, 2023, 11:07pm UTC](https://forum.inductiveautomation.com/t/force-non-input-component-to-be-disabled-so-style-element-state-triggers/77792/4 "2023-08-28T23:07:42Z")

</div>

Sounds like a great solution! Nice workaround