function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Gurleen KaurGurleen 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?
Danish HodaDanish Hoda
Hi Gurleen,
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.