CODEWITHSUNDEEP
htmlblazordisabled-input
Bercovici Adrian
Bercovici Adrian

Reputation: 9360

How to enable/disable inputs in blazor

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.

Upvotes: 86

Views: 104181

Answers (12)

Katlego Emmanuel Nkosi
Katlego Emmanuel Nkosi

Reputation: 11

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

Upvotes: 0

rtfmpliz
rtfmpliz

Reputation: 339

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

@rendermode InteractiveServer

Upvotes: 0

Mark Cooper
Mark Cooper

Reputation: 6884

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" />

Upvotes: 3

clamchoda
clamchoda

Reputation: 4941

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.

Upvotes: 6

Sebastian4615
Sebastian4615

Reputation: 7

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

Upvotes: -1

Chris Sainty
Chris Sainty

Reputation: 8521

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.

Upvotes: 173

Arjun
Arjun

Reputation: 53

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

Upvotes: 4

Matthew
Matthew

Reputation: 500

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

Upvotes: 17

Arjun
Arjun

Reputation: 53

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

Upvotes: 1

Vesko I
Vesko I

Reputation: 65

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" />
}

Upvotes: 1

Mteheran
Mteheran

Reputation: 293

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

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

Upvotes: 14

Peter Morris
Peter Morris

Reputation: 23224

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>

Upvotes: 17

Related Questions