Unplanned
Last Updated: 15 Dec 2021 09:34 by ADMIN

I set the Enabled parameter to false, but it didn't disable the input.

Wrap the Switch inside label HTML element and set Enabled to false. Switch will remain enabled. This problem occurs only when you wrap the Switch inside a label. If the Switch is wrapped in another HTML element, the Enabled parameter will work as expected.

 

----------ADMIN EDIT----------

In the meantime, there are two possible workarounds:

  • If you want to use the label HTML element, you can add a custom CSS rule that disables the click. You can see the following example. 
    @if (isEnabled == false)
    {
        <style>
            .switch {
                pointer-events: none;
            }
        </style>
    }
    
    <label class="switch">
        <TelerikSwitch @bind-Value="@isSelected" Enabled="@isEnabled" />
        @( isSelected ? "Selected" : "Not selected" )
    </label>
    
    @code {
        private bool isSelected { get; set; }
        static bool isEnabled { get; set; } = false;
    }
  • The second option is to avoid using label and wrap the Switch with a different HTML element.