How to enable/disable inputs in blazor

Question

I am trying to Enable/Disable a group of time inputs in Blazor based on a checkbox ; while for inputs of type button the below solution works ,for inputs of type time it doesn't :

Solution for button input that works:

<button type="button" class="@this.SetButton"></button>

[Parameter] public bool state { get; set; }

public string SetButton() {
    string result = state ? "" : "disabled";
    return result;
}

Attempt for time inputs that does not work:

<input bind="@IsDisabled" type="checkbox" />                      
<input class="@this.GetGroupState()" type="time" />

protected bool IsDisabled { get; set; }

public string GetGroupState() {
    return this.IsDisabled ? "disabled" : "";
}

P.S.: In the first scenario the bool comes as a parameter from another component so I don't bind it. In the second case, however, it is bound to the checkbox.

Answer 1

To disable elements you should use the disabled attribute.

I've modified your code a bit and this will do what you're after. Blazor will automatically add or remove the disabled attribute based on the IsDisabled value.

You should use the disabled attribute on your button as well. It's a much better practice.

<button type="button" disabled="@IsDisabled"></button>
<input bind="@IsDisabled" type="checkbox" />

<input disabled="@IsDisabled" type="time" />

@code{
    protected bool IsDisabled { get; set; }
}

You can still combine this with applying a CSS class for styling the disabled element. It's up to you.