AEM 65 - Select One checkbox across Multifield Items in a Composite Multifield

Goal


Make sure only one checkbox is selected in a composite multifield with multiple items added

Demo | Package Install | Github


Set Checkbox Attribute

                Set the attribute granite:class="eaem-mf-dialog-select-one-checkbox" for unique selection



Checkbox Selection



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-multifield-select-one-checkbox

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-multifield-select-one-checkbox/clientlib and set a property categories of String[] type to [cq.authoring.dialog.all]dependencies of type String[] with value lodash

3) Create file ( type nt:file ) /apps/eaem-touchui-multifield-select-one-checkbox/clientlib/js.txt, add the following

                         multifield-checkbox.js

4) Create file ( type nt:file ) /apps/eaem-touchui-multifield-select-one-checkbox/clientlib/multifield-checkbox.js, add the following code

(function ($, $document) {
    var CHECKBOX_SELECTOR = ".eaem-mf-dialog-select-one-checkbox";

    $document.on("dialog-ready", addSelectSingleCheckboxListener);

    function addSelectSingleCheckboxListener(){
        $document.on('change',  CHECKBOX_SELECTOR, function(e) {
            $(CHECKBOX_SELECTOR).not(this).prop('checked', false);
        });
    }
}(jQuery, jQuery(document), Granite.author));



1 comment:

  1. Hi there,
    Thank you so much for the post you do and also I like your post, Are you looking for
    Buy 10 Bedroom, Paying Guest/PG In Ashiana, Lucknow for sale, Buy PG HOSTEL, Lucknow for sale, Buy Brand New Construction Girls Pg, Lucknow for sale ,
    Buy 2500 10 BHK, Paying Guest/PG In Indira Nagar Lucknow for sale, Buy PG Near Narhi, Hazratganj, Lucknow for sale ,
    Buy 6000 1 Bedroom, Paying Guest/PG In Ashiana, Lucknow for sale, n95 mask supplier, a handels gmbh, surgical face mask earloop 3 ply,
    5 litre hand sanitizer, care 5 hand sanitizer, 3m 1860 n95 healthcare particulate respirator, 3m 1860s particulate respirator and surgical mask,
    3m disposable protective coverall 4545, nitrile gloves wholesale, nitrile gloves allergy, non-contact ir infrared digital thermometer, non-contact thermometer,
    Buy 3M PROTECTIVE COVERALL, 4545 Online with the well price and our services are very fast.Click here for
    MORE DETAILS......
    CONTACT INFORMATION
    E-mail : info@unipropertybazar.com
    Phone/Whatsapp:+919956954292‬

    ReplyDelete