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

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.

Answer 2

There is an alternative way you can achieve this.

<fieldset disabled=@ShouldBeDisabled>
  Your input controls in here will be disabled/enabled by the browser
</fieldset>

Answer 3

You can also get the value to disable the button directly as an expression

<input disabled="@(MyCondition ? true : false)" type="checkbox" />