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));