How to disable well with multiple fields in it | Community
Skip to main content
S
SudarshanV1
Level 3
April 29, 2025
Solved

How to disable well with multiple fields in it

  • April 29, 2025
  • 3 replies
  • 669 views

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

Best answer by 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.

3 replies

SantoshSai
Community Advisor
SantoshSaiCommunity Advisor
Community Advisor
April 29, 2025

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!

Santosh Sai
    S
    SudarshanV1Author
    Level 3
    April 29, 2025

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

    SantoshSai
    Community Advisor
    SantoshSaiCommunity AdvisorAccepted solution
    Community Advisor
    April 29, 2025

    @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.

    Santosh Sai
      AmitVishwakarma
      Community Advisor
      AmitVishwakarmaCommunity Advisor
      Community Advisor
      April 30, 2025

      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
      Community Advisor
      aanchal-sikkaCommunity Advisor
      Community Advisor
      May 5, 2025

      @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!

      Aanchal Sikka
      Terms & ConditionsAccessibility statement

      Loading footer...