salesforceapexsalesforce-lightninglwc

How to disable options when radio/check is selected in LWC?


I'm new to Salesforce LWCs and wanted some help with this. So basically I want to figure out how to disable and check off the options for all the months when 'All' is selected.

https://i.sstatic.net/3kt7L.png


Solution

  • I prefer you try to learn yourself and do it on your own. But here is the solution for the same. If you even try to understand my code you will get to know it is so simple.

    HTML File:

        <template>
            <lightning-radio-group name="Month"
            label="Month"
            options={options}
            value={rcvalue}
            type="radio"
            onchange={handleChange}
            ></lightning-radio-group>
        
            <template if:false={isDisabled}>
            <lightning-checkbox-group name="Checkbox Group"
                                      label="Checkbox Group"
                                      options={checkboxoptions}
                                      value={ckvalue}
                                      
                                      ></lightning-checkbox-group>
                                      </template>
                              
                                      <template if:true={isDisabled}>
                                        <lightning-checkbox-group name="Checkbox Group"
                                                                  label="Checkbox Group"
                                                                  options={checkboxoptions}
                                                                  value={ckvalue}
                                                                  disabled
                                                                  ></lightning-checkbox-group>
                                                                  </template>
                                                          
        </template>
    

    JS File:

        import { LightningElement, track } from 'lwc';
         
        export default class Demo extends LightningElement {
            @track options= [
                { label: 'All', value: 'All' },
                { label: 'Custom', value: 'Custom' },
            ];
            @track checkboxoptions= [
                { label: 'Jan', value: 'Jan' },
                { label: 'Feb', value: 'Feb' },
                { label: 'Mar', value: 'Mar' },
                { label: 'Apr', value: 'Apr' },
                { label: 'May', value: 'May' },
                { label: 'Jun', value: 'Jun' },
                { label: 'Jul', value: 'Jul' },
                { label: 'Aug', value: 'Aug' },
                { label: 'Sep', value: 'Sep' },
                { label: 'Oct', value: 'Oct' },
                { label: 'Nov', value: 'Nov' },
                { label: 'Dec', value: 'Dec' },
            ];
            @track rcvalue = 'All';
            @track ckvalue =['Jan','Feb','Mar','Apr','May','Jun' ,'Jul' ,'Aug','Sep','Oct','Nov','Dec'];;
            @track isDisabled= true;
            handleChange(event){
               if(event.target.value == 'All'){
                this.isDisabled =true;
               }else{
                this.isDisabled =false;
               }
            }
            
        }