How to enable/disable inputs in blazor
HtmlBlazorDisabled InputHtml Problem Overview
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
.
Html Solutions
Solution 1 - Html
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 - Html
You can also get the value to disable the button directly as an expression
<input disabled="@(MyCondition ? true : false)" type="checkbox" />
Solution 3 - Html
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 - Html
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 - Html
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
Solution 6 - Html
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; }
Solution 7 - Html
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" />
}