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-16 11:21:53Z

172

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, 2021 at 11:21

answered Mar 5, 2019 at 12:19

Chris Sainty

8,5893 gold badges44 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Henk Holterman Over a year ago

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

GregH Over a year ago

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 Over a year ago

@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 Over a year ago

@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 Over a year ago

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

|

Peter Morris · Accepted Answer · 2020-05-26 14:08:11Z

17

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, 2020 at 14:08

Peter Morris

23.5k12 gold badges97 silver badges172 bronze badges

Comments

Matthew · Accepted Answer · 2021-09-01 15:44:12Z

17

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

answered Sep 1, 2021 at 15:44

Matthew

5004 silver badges17 bronze badges

Comments

Mteheran · Accepted Answer · 2020-08-20 21:03:03Z

15

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

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

answered Aug 20, 2020 at 21:03

Mteheran

3311 gold badge5 silver badges9 bronze badges

5 Comments

jonas Over a year ago

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

Bennyboy1973 Over a year ago

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

Kieran Foot Over a year ago

Great example of code for codes sake. You basically wrote If(MyCondition == true) { return true; } else { return false; }. I would suggest you delete this answer, but for some reason you have some upvotes, god only knows how...

mxmissile Over a year ago

no button referenced in the code either...

Leandro Bruscato Oct 7 at 16:40

only this work.

clamchoda · Accepted Answer · 2023-02-25 00:15:53Z

6

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.

answered Feb 25, 2023 at 0:15

clamchoda

5,1213 gold badges45 silver badges83 bronze badges

Comments

Arjun · Accepted Answer · 2021-09-14 10:42:20Z

4

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

answered Sep 14, 2021 at 10:42

Arjun

531 silver badge3 bronze badges

Comments

Mark Cooper · Accepted Answer · 2023-10-11 16:48:34Z

3

For me neither of these worked

<input disabled="@(IsDisabled)" type="radio" />
<input disabled=@(IsDisabled) type="radio" />

I had to remove the quotes and the braces, and this finally worked

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

answered Oct 11, 2023 at 16:48

Mark Cooper

6,8946 gold badges58 silver badges101 bronze badges

Comments

Vesko I · Accepted Answer · 2021-02-25 14:53:14Z

1

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, 2021 at 14:53

Vesko I

651 bronze badge

3 Comments

Sith2021 Over a year ago

Should be @bind = "IsDisabled"

JohnB Over a year ago

@Sith2021 you are totally not following this entire discussion. They are talking about adding the disabled attribute to a HTML element.

clamchoda Over a year ago

@Vesko Use @value instead of @bind on the disabled input to prevent client side manipulation as seen here.

Arjun · Accepted Answer · 2021-08-24 09:18:46Z

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; }

rtfmpliz · Accepted Answer · 2024-11-24 10:46:01Z

0

just reminder if someone forget like me don't forget to add

@rendermode InteractiveServer

answered Nov 24, 2024 at 10:46

rtfmpliz

3592 silver badges8 bronze badges

Comments

Katlego Emmanuel Nkosi · Accepted Answer · 2024-12-04 02:26:08Z

Just in case there's still confusion, this is what worked for me , setting the field for Bool worked, but setting the Field to string i.e ="disabled" doesn't work

          <div class="col-md-1 col-sm-1 col-xs-1 excel-grid">
  <select for="PaymentTypeId" disabled="@IsTaxEnabled" class="form-control-excel-select" @bind="@addingtransactions.TaxTypeId">
      @foreach (var types in listtaxtypes)
      {
          <option value="@types.Id">
              @types.Name
          </option>
      }
  </select>

//Code
bool IsTaxEnabled {get;set;} = false;
public async Task HandleOnChangeUnbound(ChangeEventArgs args)
{
    Selectiontype = args.Value.ToString();
    switch (Selectiontype)
    {
        case "Customers":
            IsTaxEnabled = true;
            break;
        case "Suppliers":
            IsTaxEnabled = true;
            break;
        case "Accounts":
            IsTaxEnabled = false;
            break;
    }
}

Sebastian4615 · Accepted Answer · 2022-05-20 08:55:36Z

-1

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, 2022 at 8:55

Sebastian4615

71 bronze badge

2 Comments

Xander Selorm Over a year ago

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: stackoverflow.com/a/69016913/6877769

Bennyboy1973 Over a year ago

It's not misleading, it's simply wrong.

Collectives™ on Stack Overflow

How to enable/disable inputs in blazor

12 Answers 12

11 Comments

Comments

Comments

5 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

11 Comments

Comments

Comments

5 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related