1

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.

2
  • As far as I understood from your question, you want to display two checkbox and only one of them should be selected. Is my understanding correct ? Commented Jan 21, 2018 at 16:07
  • 4
    You want to prevent the user from selecting more than one checkbox? Why don't use you use lightning:radioGroup for that purpose? Commented Jan 21, 2018 at 17:33

2 Answers 2

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

7
  • Ok, thank you, that seems to be a good start. But now if I try to set the new value for the checkboxGroup, it still shows both boxes checked: Commented Jan 21, 2018 at 17:33
  • if(oldValue.length < newValue.length){ alert('new value--'+helper.getDifference(oldValue, newValue)); cmp.set("v.checkboxValue", newValue); } Commented Jan 21, 2018 at 17:33
  • can you to please re-phrase your exact requirement. Commented Jan 21, 2018 at 17:51
  • 1
    Yes, thanks, I just used radio group, that did do! Commented Jan 21, 2018 at 18:12
  • 1
    But thanks also for the hint with the old and new values, that is quite useful. Commented Jan 21, 2018 at 18:13
1

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .