How to disable certain checkboxes in a DevExtreme dxList

Question

I am trying to disable certain checkboxes in a DevExtreme dxList. Below is the code I am using for the list:

<dx-list [items]="ListDataSource" selectionMode="multiple" showSelectionControls="true" [(selectedItems)]="selectedItems" (onSelectionChanged)="onSelectionChanged($event)">
    <div *dxTemplate="let item of 'item'">
        {{ item }}            
    </div>
</dx-list>

I have already tried the [disabled] approach with the following code snippet, but it didn't work:

<dx-check-box
  [disabled]="true"
  [value]="checkBoxValue"
  [elementAttr]="{ 'aria-label': 'Disabled' }"
></dx-check-box>

Answer 1

Use disabled: true with each of object in the array ListDataSource this

ListDataSource : [
    {...other_data_fields ,disabled: true},
    {...other_data_fields ,disabled: true}
    {...other_data_fields ,disabled: true}
    ]

Answer 2

In the data, whichever option you want disabled you have to provide "disabled = true".

StackBlitszDEMOLINK