Magento2 : How disable some specific values in Multi-select UI component

Question

I am setting some values in multi-select to be disabled based on some condition

This is how I am declaring my UI component

<field name="category_option">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Mycompany\Stores\Model\Category\Attribute\Source\CategoryOptions</item>
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" translate="true" xsi:type="string">Category Option</item>
                    <item name="formElement" xsi:type="string">multiselect</item>
                    <item name="source" xsi:type="string">category_option</item>
                    <item name="sortOrder" xsi:type="number">60</item>
                    <item name="dataScope" xsi:type="string">category_option</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

And passing values using

public function toOptionArray()
    {
        $categories = $this->_helper->getTestCategoryOptions();
        $testArr = [];
        foreach($categories as $category){
            $testArr = array_merge($testArr,$category);
        }
        foreach($testArr as $test){
            switch($test['label']){
                case 'case1':                
                    $result[] = ['value' => $test['label'], 'label' => strtoupper($test['label']), 'disabled'=>""];
                    break;
                case 'Food City':
                    $result[] = ['disabled'=>'disabled','value' => $test['label'], 'label' => strtoupper($test['label'])];
                    break;
                case 'case2':
                    $result[] = ['value' => $test['label'], 'label' => strtoupper($test['label'])];
                    break;
                case 'case3':
                    $result[] = ['value' => $test['label'], 'label' => strtoupper($test['label'])];
                    break;
                case 'case4':
                    $result[] = ['value' => $test['label'], 'label' => strtoupper($test['label'])];
                    break;
                default:
                    $result[] = ['value' => $test['value'], 'label' => $test['label']];
            }
        }
        return $result;
    }

in above code I even tried 'disabled'=>'disabled' , 'disabled'=>'true' but no effect on UI component

Answer 1

The function that outputs the option tag is _optionToHtml in vendor/magento/framework/Data/Form/Element/Multiselect.php

It doesn't look for a disabled attribute, but you can trick it into outputting the attribute by abusing the option 'title' or 'style' attributes. e.g.

        case 'Food City':
            $result[] = ['style'=>'" disabled="disabled"','value' => $test['label'], 'label' => strtoupper($test['label'])];
            break;

Edit: This answer is not recommended anymore. It will throw an error "invalid css given" in later versions of Magento 2, i.e. 2.4