Disable one of the checkbox in lightning-checkbox-group in LWC

Question

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?

Answer 1

Don't think its possible to play around with individual checkboxes in <lightning-checkbox-group> </lightning-checkbox-group>, better to use <lightning-input type="checkbox" checked disabled></lightning-input>

As per the documentation

Usage Considerations lightning-checkbox-group is useful for grouping a set of checkboxes. If you have a single checkbox, use lightning-input type="checkbox" instead.

Disabling the complete group using the disabled attribute makes sense because they are treating the group of checkboxes as a single unit.

Answer 2

I understand that you want your checkbox group will behave like radio button. This solution is working for me:

handleChange(e) {
    const __value = Array.from(e.detail.value)
        .filter((val) => val !== this.value[0]); 
    this.value = __value;
}