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.

  • 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 ? – Arpit Sethi Jan 21 '18 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? – David Cheng Jan 21 '18 at 17:33
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 !!!

  • 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: – user40501 Jan 21 '18 at 17:33
  • if(oldValue.length < newValue.length){ alert('new value--'+helper.getDifference(oldValue, newValue)); cmp.set("v.checkboxValue", newValue); } – user40501 Jan 21 '18 at 17:33
  • can you to please re-phrase your exact requirement. – Arpit Sethi Jan 21 '18 at 17:51
  • 1
    Yes, thanks, I just used radio group, that did do! – user40501 Jan 21 '18 at 18:12
  • 1
    But thanks also for the hint with the old and new values, that is quite useful. – user40501 Jan 21 '18 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.