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.
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>
You can also get the value to disable the button directly as an expression
<input disabled="@(MyCondition ? true : false)" type="checkbox" />
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.
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" />
}
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; }
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)" ...
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) ...