How can I enable button only when user clicks check box in Blazor

Question

<button id="btn1" type="submit" disabled="@true">Submit</button>
<input type="checkbox" @onclick="@btn1"=disabled="@false"/>
<button disabled="@isDisable">button</button>

I am trying to get my submit button disabled, it should be enabled only when a user clicks the checkbox (Privacy Policy); how can I do so using Blazor?

Answer 1

The most straight-forward way would be to bind a boolean property to the checkbox input like so:

<input type="checkbox" @bind="HasChecked" />
<button type="submit" disabled="@(!HasChecked)">Submit</button>

@code {
    private bool HasChecked { get; set; }
}

@binding to a checkbox with a boolean uses the checked state of the element to determine the bound property value.

Alternatively, if you need more control, you can bind an @onchange handler:

<input type="checkbox" @onchange="HandleCheckboxChange" />
<button type="submit" disabled="@IsDisabled">Submit</button>

@code {
    private bool IsDisabled { get; set; }

    private void HandleCheckboxChange(ChangeEventArgs args)
    {
        IsDisabled = !(args.Value is true);
    }
}