Unable to disable fields within an active js-disabler target container

Justis R

Member
Affected version
v2.2.7 Patch 1
Got a disabler target container with a bunch of form fields inside.

Some of the fields have individual disable conditions on them so that even if the parent div is active, individual fields can still be disabled based on field specific conditions, however when the parent container is active the disabler is setting all of the fields contained within it to active rather than returning them to their initial state.

Pseudocode:

HTML:
<xf:checkboxrow label="Cool feature">
    <xf:option name="enable_cool_feature" value="1" label="Enable"
               data-xf-init="disabler" data-container="#js-coolFeatureFields" />
</xf:checkboxrow>

<div id="js-coolFeatureFields">
    <xf:textboxrow name="cool_feature_field_1"
                   disabled="{{!$user.hasPurchasedACertainUpgrade()}}"
                   hint="{{!$user.hasPurchasedACertainUpgrade() ? 'Oh no, you better upgrade before you can access THIS cool feature!' : ''}}"/>
    <xf:textboxrow name="cool_feature_field_2"/>
    <xf:textboxrow name="cool_feature_field_3"/>
</div>

Recommend: Have the js-disabler capture the initial disable state of the fields within the target container and return the fields to that state when the container is active, rather than blanket enabling them all.
Alternative: Read an optional data property from the input fields which specifies the desired disable state when the container is enabled.
 
Last edited:
Back
Top Bottom