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.

Chris Sainty · Accepted Answer · 2021-12-16T11:21:53.157

144

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.

edited Dec 16 '21 at 11:21

answered Mar 05 '19 at 12:19

Chris Sainty

7,861
2
37
59

37

Yes, Blazor makes `disabled="false"` disappear. Takes a little getting used to. – H H Mar 05 '19 at 12:35
6

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 – GregH Mar 05 '19 at 16:50
3

@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. – Mister Magoo Mar 06 '19 at 10:58
3

@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. – Chris Sainty Mar 26 '19 at 09:50
1

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. – shawty Sep 16 '19 at 21:04
1

If you get a "is not a valid value" warning, that's just a bug of Blazor 3.x, see here: https://github.com/aspnet/AspNetCore/issues/16833 – Paolo Fulgoni Dec 24 '19 at 14:35
1

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

Uxonith

Apr 01 '20 at 17:02

2

@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. – Chris Sainty Apr 01 '20 at 17:19

1

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. – Gabe Dec 23 '20 at 00:32

1

For net 6 (I guess net5 too), this part should be rewritten: `bind = "@IsDisabled"` as `@bind = "IsDisabled"` – Sith2021 Dec 12 '21 at 15:35

Don't forget you might need to call `StateHasChanged()` after changing the bool value that drives the `Disabled` state of the input/button. – Paul Suart Sep 02 '22 at 11:26

score 15 · Answer 2 · answered May 26 '20 at 14:08

15

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>

answered May 26 '20 at 14:08

Peter Morris

20,174
9
81
146

score 13 · Answer 3 · answered Aug 20 '20 at 21:03

13

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

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

answered Aug 20 '20 at 21:03

Mteheran

265
1
4
8

5

What is the purpose of true : false? Isnt that the value of MyCondition to begin with? – jonas Jul 23 '21 at 07:30
3

Yeah, I don't see the point of the ternary operator. Just `@MyCondition` should be fine. – Bennyboy1973 Sep 14 '21 at 10:49

score 9 · Answer 4 · answered Sep 01 '21 at 15:44

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)" ...

score 4 · Answer 5 · answered Sep 14 '21 at 10:42

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

HTML Input Control

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

score 2 · Answer 6 · answered Feb 25 '23 at 00:15

Adding disabled is not really a good solution because the client can inspect the page and remove the disabled attribute. I think the best solution is to add disabled and remove the two way binding by using value instead of @bind.

@if (IsDisabled)
{
    <input type="checkbox" value="@Value" disabled />
}
else
{
    <input type="checkbox" @bind="Value" />
}

Now even if the user removes the disabled attribute the value can be changed but it won't be updated.

I prefer to put all my input components into their own component that inherits InputBase for two way binding while handling IsDisabled as described.

score 1 · Answer 7 · answered Aug 24 '21 at 09:18

I have simplified the complete code - Working!

Test Cases:
By default checkbox is unchecked, and submit button is disabled.
When checkbox checked, submit button enabled
When checkbox un-checked, submit button disabled

<div class="card">
    <div class="card-header">Final Submission</div>
    <div class="card-body">

        <div class="form-check">
            <input id="xbrlfinal" class="form-check-input" type="checkbox" bind="@IsAcknowledged" 
            @onchange="@((args) => IsAcknowledged = (bool)args.Value)">
            <label class="form-check-label" for="flexCheckDefault">
                I hereby declare that I have checked and verified.
            </label>
        </div>

    </div> <!-- Main Card body ends -->
    <div class="card-footer text-muted">
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="submit" class="btn btn-primary me-md-3" @onclick="OnSubmissionProcess" disabled="@(IsAcknowledged?false:true)">Process</button>

        </div>
    </div>
</div> <!-- Main Card ends -->

 protected bool IsAcknowledged { get; set; }

score 0 · Answer 8 · answered Feb 25 '21 at 14:53

0

Blazor makes disabled="false" disappear. This statement is not true! The only way is to use if statement like this.

@if (IsDisabled)
{
    <input type="checkbox" @bind="Value" disabled />
}
else
{
    <input type="checkbox" @bind="Value" />
}

answered Feb 25 '21 at 14:53

Vesko I

55
1

Should be @bind = "IsDisabled" – Sith2021 Dec 12 '21 at 15:37
@Sith2021 you are totally not following this entire discussion. They are talking about adding the `disabled` attribute to a HTML element. – JohnB Aug 07 '22 at 17:44

score 0 · Answer 9 · answered May 20 '22 at 08:55

0

HTML disabled property cannot get value true or false. Only way is add it or not: https://www.w3schools.com/tags/att_input_disabled.asp

answered May 20 '22 at 08:55

Sebastian4615

9
1

2

This answer is quite misleading since Blazor works a little differently when it comes to handling HTML attributes. Consider having a look at this answer: https://stackoverflow.com/a/69016913/6877769 – Xander Selorm Nov 15 '22 at 10:36
It's not misleading, it's simply wrong. – Bennyboy1973 Mar 02 '23 at 01:53

How to enable/disable inputs in blazor

9 Answers9

Linked