How to disable well with multiple fields in it

[SudarshanV1]

I have scenario where,
we have single multifield and each multifield item have checkbox.
based on checking the checkbox i want to disable other fields in each multifield item.

Sample:

multi item1 --> text,desc,image,datepicker and checkbox  (when i check checkbox i want to disable other fields)
multiitem2 --> text,desc,image,datepicker and checkbox  (when i check checkbox i want to disable other fields)
multi item3 --> text,desc,image,datepicker and checkbox  (when i check checkbox i want to disable other fields)
multi item4 --> text,desc,image,datepicker and checkbox  (when i check checkbox i want to disable other fields)
multi item5 --> text,desc,image,datepicker and checkbox  (when i check checkbox i want to disable other fields)
:
:
and soon


can anyone help in having js logic for this or any solution for this

[SantoshSai]

Hi @SudarshanV1,

Try this:

(function ($, $document) {
    "use strict";

    $document.on("dialog-ready", function () {
        function toggleFields($item) {
            var isChecked = $item.find('.your-checkbox-class input[type="checkbox"]').prop('checked');

            $item.find('input[type="text"], textarea, coral-datepicker, .coral-FileUpload')
                .not('.your-checkbox-class input') // skip the checkbox itself
                .each(function () {
                    if (isChecked) {
                        $(this).attr('disabled', true);
                    } else {
                        $(this).removeAttr('disabled');
                    }
                });
        }

        // When checkbox changes
        $document.on('change', '.your-checkbox-class input[type="checkbox"]', function () {
            var $item = $(this).closest('.coral-Multifield-item');
            toggleFields($item);
        });

        // Also handle already filled fields (if editing)
        $('.coral-Multifield-item').each(function () {
            var $item = $(this);
            toggleFields($item);
        });
    });

})(jQuery, jQuery(document));

Give this a try by adding a custom class (like your-checkbox-class) to your checkbox in the dialog XML.

Example for checkbox:

<checkbox
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
    text="Disable Fields?"
    name="./disableFields"
    class="your-checkbox-class"/>

When you check the checkbox, this should disable only the fields inside that specific item, without affecting other multifield entries.

Hope that helps!

[SudarshanV1]

Cant we directly disable well itself if we add inside well?

[SantoshSai]

@SudarshanV1 

You can't directly disable the entire well (multifield) itself in AEM dialogs, I don't think AEM provides a built-in option to disable the entire multifield container in one go. However, you can achieve a similar effect by disabling the individual fields inside the multifield when the checkbox is checked.

To disable the well or multifield, you would typically need to disable the fields within each multifield item individually, as shown in the above code. Disabling the entire well or multifield directly would require additional logic, like preventing user interaction with all the contained fields, but this still needs to be done field-by-field.

That means, if you want to simulate disabling the entire well, you could use a wrapper element around the multifield and apply the same approach of disabling the individual fields, while also applying CSS to visually disable the container, like:

.disabled-well {
    pointer-events: none;
    opacity: 0.5;
}

You can add a class like .disabled-well to the multifield container when the checkbox is checked, giving the impression that the whole well is disabled. However, the individual fields still need to be disabled for this to work.

[AmitVishwakarma]

Hi @SudarshanV1 ,

Step 1: Add Checkbox with Class

In your dialog XML, add a checkbox like this inside each multifield item:

<disableFields
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
    text="Disable Fields?"
    name="./disableFields"
    class="disable-fields-toggle"/>

Step 2: JavaScript Logic (cq:dialog clientlib)

Add this JS to your component’s cq:dialog clientlib (usually under clientlibs/dialog/js/disable-fields.js):

(function ($, $document) {
    "use strict";

    function toggleFields($item) {
        const isChecked = $item.find('.disable-fields-toggle input[type="checkbox"]').prop('checked');

        // Disable all input fields, textareas, datepickers, fileupload etc., except the checkbox itself
        $item.find('input, textarea, select, coral-datepicker, .coral-FileUpload')
            .not('.disable-fields-toggle input') // skip the checkbox itself
            .each(function () {
                if (isChecked) {
                    $(this).attr('disabled', true);
                } else {
                    $(this).removeAttr('disabled');
                }
            });

        // Optional: add a disabled visual effect
        $item.toggleClass('disabled-well', isChecked);
    }

    $document.on("dialog-ready", function () {
        // Handle existing multifield items (when dialog opens in edit mode)
        $('.coral-Multifield-item').each(function () {
            toggleFields($(this));
        });

        // On checkbox change
        $document.on('change', '.disable-fields-toggle input[type="checkbox"]', function () {
            const $item = $(this).closest('.coral-Multifield-item');
            toggleFields($item);
        });
    });

})(jQuery, jQuery(document));

Step 3: Optional Styling (visual grey-out effect)

Add this CSS to the same dialog clientlib:

.disabled-well {
    opacity: 0.5;
    pointer-events: none;
}
.disabled-well .disable-fields-toggle {
    pointer-events: auto; /* Allow checkbox to still work */
    opacity: 1;
}

Step 4: Add to clientlibs

Make sure your clientlib includes the JS and CSS, and is embedded in the dialog:

<clientlib
    categories="[cq.authoring.dialog]"
    js="[disable-fields.js]"
    css="[disable-fields.css]"/>

Regards,
Amit

[aanchal-sikka]

@SudarshanV1 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!