You need to sign in to do that
Don't have an account?
Gurleen Kaur
Disable one of the checkbox in lightning-checkbox-group in LWC
Currently, I am displaying a set of checkboxes on the screen using lightning-checkbox-group, but I need to disable one of the checkbox conditionally. So, looks like we have a 'disabled' attribute in lightning-checkbox-group but when set to true, it disables all the checkboxes. Below is the approach which I tried to disable only 'Second' checkbox, but it is not working:
myComp.html
<template>
<lightning-checkbox-group name="Checkbox Group"
label="Checkbox Group"
options={options}
value={value}
onchange={handleChange}
disabled={options.disabled} >
</lightning-checkbox-group>
</template>
myComp.js
import { LightningElement, track } from 'lwc';
export default class CheckboxGroupBasic extends LightningElement { @track value = ['option1'];
get options() {
return [
{ label: 'First', value: 'option1'},
{ label: 'Second', value: 'option2',disabled :true },
];
}
get selectedValues()
{
return this.value.join(',');
}
handleChange(e)
{ this.value = e.detail.value;
}
}
But still it is not disabling the Second checkbox. Any suggestions?
myComp.html
<template>
<lightning-checkbox-group name="Checkbox Group"
label="Checkbox Group"
options={options}
value={value}
onchange={handleChange}
disabled={options.disabled} >
</lightning-checkbox-group>
</template>
myComp.js
import { LightningElement, track } from 'lwc';
export default class CheckboxGroupBasic extends LightningElement { @track value = ['option1'];
get options() {
return [
{ label: 'First', value: 'option1'},
{ label: 'Second', value: 'option2',disabled :true },
];
}
get selectedValues()
{
return this.value.join(',');
}
handleChange(e)
{ this.value = e.detail.value;
}
}
But still it is not disabling the Second checkbox. Any suggestions?
You can't do this in lightning-checkbox-group as it takes all the values as one entity, if you really want to achieve this, then you need to create a table with checkbox in each row and pass the boolean variables to enable/disable.