在LWC中选择单选/复选时如何禁用选项？

Question

我是 Salesforce LWC 的新手，需要一些帮助。 所以基本上我想弄清楚如何在选择“全部”时禁用和检查所有月份的选项。

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

Answer 1

我更喜欢你尝试自己学习并自己做。但这是相同的解决方案。如果您尝试理解我的代码，您就会发现它是如此简单。

HTML 文件：

    <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 文件：

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