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.

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

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

Answer 4

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

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

Answer 5

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.

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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