禁用行选择，只允许在 PrimeNG 的 Mutliselect 中选择复选框

Question

I am working on a requirement in which i am using PrimeNG multiselect. This multiselect has a checkboxes which are followed by texts in it. I want to disable the row selection and only allow checkboxes to be selected of these rows. Below is the example: Scenerio explained with screenshot:

If i click on text " 1 text ", " 2 text ", etc the values are selected but i want to disable this selection and only allow checkbox to be selected.

Here is the stackblitz example for reference: Stackblitz Demo click here .

Following Code which i used in my component html: <p-multiSelect [options]="items" defaultLabel="Select items" [showHeader]="false" </p-multiSelect>
Code for items in array used in dropdown:

items: SelectItem[] = [
  { value: 1, label: '1 text' },
  { value: 2, label: '2 text ' },
  { value: 3, label: '3 text' },
 ];
}

Answer 1

Check this Stackblitz link

---

SOLUTION 1: As this selection is default behavior of primeNg multiSelect so with onChange event Emitter of p-multiSelect I am removing the added value or adding the removed value on deselect value.

SOLUTION 2: Using event.stopPropagation() but this works only if I click label but clicking row still select/deselect value.