salesforce - 在 LWC 中选择单选/检查时如何禁用选项？

Question

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

https://i.stack.imgur.com/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;
       }
    }
    
}