Lightning:Checkboxgroup select only one option

Question

How do I select only one entry from a lightning:checkboxgroup, meaning, I can do an either - or, but not select two options at once? I have two checkboxes in my group, and v.value gives the order according to the options set in the options attribute, but then I cannot find out which is the latest value selected. See description of lightning:inputcheckbox:https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_checkboxGroup.htm.

Answer 1

You can use change handler to identify the changes between old and new values.

<aura:handler name="change" value="{!v.checkboxValue}" action="{!c.checkboxHandler}"/>

Bind an action "checkboxHandler" which will be triggered whenever value of checkbox will change. Please find the below example which will help you to solve your problem.

Component:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="options" type="List" default="[
                                                    {'label': 'Blue', 'value': 'Blue'},
                                                    {'label': 'Red', 'value': 'Red'},
                                                    {'label': 'Green', 'value': 'Green'}

                                                    ]"/>
<aura:attribute name="checkboxValue" type="List"/>
<aura:handler name="change" value="{!v.checkboxValue}" action="{!c.checkboxHandler}"/>

<lightning:checkboxGroup
                         aura:id="mygroup"
                         name="checkboxGroup"
                         label="Checkbox Group"
                         options="{! v.options }"
                         value="{! v.checkboxValue }"
                         required="true" />        

Controller.js

 ({
    checkboxHandler: function (cmp, event, helper) {      
    var oldValue= event.getParam("oldValue");
    var newValue = event.getParam("value");
    console.log("old value: " + oldValue);
    console.log("new value: " + newValue);
    // Identify the new checkbox value
    if(oldValue.length < newValue.length){
        alert('new value--'+helper.getDifference(oldValue, newValue));
    }
   }
});

Helper.js:- A utility method is written here which compares two arrays and returns the difference

({
    getDifference : function(oldValue, newValue) {
    var result = [];
    for (var i = 0; i < newValue.length; i++) {
        if (oldValue.indexOf(newValue[i]) === -1) {
            result.push(newValue[i]);
        }
    }
    for (i = 0; i < oldValue.length; i++) {
        if (newValue.indexOf(oldValue[i]) === -1) {
            result.push(oldValue[i]);
        }
    }
    return result;
}
})

I hope it helps. Please mark it as answer if it resolve your issue and can help other community members. Cheers !!!

Answer 2

If you need to be able to find out which is the latest value selected - you could keep a "backup copy" of the state whenever it's changed, so that on the next change you can compare to see what's different.