Как отключить опции, когда в LWC выбрано радио / проверка?

Question

Я новичок в Salesforce LWC и мне нужна помощь с этим. Итак, в основном я хочу выяснить, как отключить и отметить параметры для всех месяцев, когда выбрано "Все".

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