在 LWC 中选择 radio/check 时如何禁用选项?
How to disable options when radio/check is selected in LWC?
我是 Salesforce LWC 的新手,需要一些帮助。
所以基本上我想弄清楚如何在选择 'All' 时禁用和检查所有月份的选项。
https://i.stack.imgur.com/3kt7L.png
我更喜欢你尝试自己学习并自己做。但这是相同的解决方案。如果您甚至尝试理解我的代码,您就会知道它是如此简单。
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;
}
}
}
我是 Salesforce LWC 的新手,需要一些帮助。 所以基本上我想弄清楚如何在选择 'All' 时禁用和检查所有月份的选项。
https://i.stack.imgur.com/3kt7L.png
我更喜欢你尝试自己学习并自己做。但这是相同的解决方案。如果您甚至尝试理解我的代码,您就会知道它是如此简单。
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;
}
}
}