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

htmlblazordisabled-inputlaravellaravel-8laravel-controllerlaravel-paginationlaravel-notification


Solution 1:[1]

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

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

Solution 2:[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>

Solution 3:[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)" ...

Solution 4:[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

<InputText @bind-Value="UserModel.UserName" id="userName" class="form-control" disabled=@(!IsDisabled) />

HTML Input Control

<input disabled=@(!IsDisabled) ...

Solution 5:[5]

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 6:[6]

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

Solution 7:[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" />
}

Solution 8:[8]

You should do

$no = Auth::user()->readNotifications()->latest()->paginate(7);

In this way you are ordering descending before pagination. Your code orders the result collection created by pagination.

https://laravel.com/docs/8.x/queries#latest-oldest

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mteheran
Solution 2 Peter Morris
Solution 3 Matthew
Solution 4 Arjun
Solution 5 Arjun
Solution 6 Sebastian4615
Solution 7 Vesko I
Solution 8 Jack

Related Questions