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.

Solution 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.

Solution 2

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

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

Solution 3

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>

Solution 4

Quotes can make all the difference, or at least during server prerendering:

a) Without quotes - The disable parameter will be removed when it's evaluated as false. This will work as expected:

<input disabled=@(IsDisabled) ...

b) With quotes - It will add a value of "True" or "False" to the parameter eg. disabled="True" or disabled="False". It will remain disabled as the browser is on the hunt for the parameter rather than a value.

<input disabled="@(IsDisabled)" ... 

Solution 5

With the reference of the above answer a) Without Quotes

<input disabled=@(IsDisabled) ...

Incase you set IsDisabled to true, the above line will not disable the input

This solves by adding !IsDisabled

Blazor Input Control

<InputText @bind-Value="UserModel.UserName" id="userName" class="form-control" disabled=@(!IsDisabled) />

HTML Input Control

<input disabled=@(!IsDisabled) ...

View more solutions

Comments

[Henk Holterman]

Yes, Blazor makes disabled="false" disappear. Takes a little getting used to.

[GregH]

this answer is certainly correct- i just want to point out that using disabled attributes is not a safe way to prevent form data from being edited or saved as users can easily modify the html client side to remove the disabled attribute then modify the field

[Mister Magoo]

@GregH is correct, you should render your control as a non-editable element, like a label if it is disabled, this will prevent client side fiddling.

[Chris Sainty]

@Sergey Fixed. Just for any future readers, it actually doesn't matter if you use quotes or not around variables in attributes. You're not writing HTML its Razor. So disabled="@IsDisabled" and disabled=@IsDisabled are both perfectly valid.

[shawty]

Thanks Chris, dunno why I didn't just try it, tried everything but. I had no idea that when false, Blazor made the attribute go-away :-) been scratching my head for hours trying to figure out how to make it work.

[Paolo Fulgoni]

If you get a "is not a valid value" warning, that's just a bug of Blazor 3.x, see here: github.com/aspnet/AspNetCore/issues/16833

[Uxonith]

I'm sure I'm abusing HTML, but I've got an @onclick on an <li> and disabling this doesn't seem to work. Is it only buttons and inputs that can be disabled in Blazor?

[Chris Sainty]

@Uxonith Disabled only works if the element does something that can be disabled, like a click. li’s don’t have a action function they are just a way of displaying something. I’d put a button in your li and remove the OnClick. It’s best not to mess with HTML semantics for the sake of accessibility and such.

[Gabe]

Kind of obvious in hind sight but in case it helps anyone get past a brain fart: A string value of "false" won't work, it's got to be a boolean.

[jonas]

What is the purpose of true : false? Isnt that the value of MyCondition to begin with?

[Jason]

Upvoting because this is just as valid as the accepted answer, which has 17x the upvotes.

[Bennyboy1973]

Yeah, I don't see the point of the ternary operator. Just @MyCondition should be fine.

[Sith2021]

For net 6 (I guess net5 too), this part should be rewritten: bind = "@IsDisabled" as @bind = "IsDisabled"

[Sith2021]

Should be @bind = "IsDisabled"