Home > Software engineering >  Disabled option in button is not being changed dynamically
Disabled option in button is not being changed dynamically

Time:03-16

I am trying to set the disabled property in a button based on a value i am setting OnInitialized. But the button remains disabled even when EnableRegistration is set to true OnInitialized. How to do toggle the disabled property based on the EnableRegistration?

@page "/course/register"

<h3 >Course Registration</h3>

<div >
    <div >
        <p >People who register for full course will be given priority over individual module registrations. 
            After registration, look for an email from us to see if you got in and instructions to pay the course fee.
            Registrations will open at 6:00 PM on March 20th.
        </p>
    </div>
    <div class=row>
    <div >
        <button onclick="Register" id="fullcourse" disabled="@(EnableRegistration == true ? "false": "true")" >Register for Full Course</button>
        
    </div>
    <div >
        <button onclick="Register" id="fullcourse" disabled="@(EnableRegistration == true ? "false": "true")" >Register for First Module</button>
    </div><br/>
        @if (!string.IsNullOrEmpty(Message))
        {
            <p>@Message</p>
        }
    </div>
</div>


@code {
    public bool EnableRegistration;

    public bool Registered = false;

    public string Message = "";

    protected override void OnInitialized()
    {
        var registrationDateTime = new DateTime(2022, 3, 15, 6, 33, 0);

        if(Registered == false && (DateTime.Compare(DateTime.Now, registrationDateTime) == 1 || DateTime.Compare(DateTime.Now, registrationDateTime) == 0))
        {
            EnableRegistration = true;
        }
    }

    public void Register()
    {
        Message = "Registered";
    }
}

Thanks.

CodePudding user response:

You need

<button id="fullcourse" disabled="@(!EnableRegistration)"  >Register for Full Course</button>

CodePudding user response:

Replace

 disabled="@(EnableRegistration == true ? "false": "true")"

with

 disabled="@(!EnableRegistration)"

HTML does not support ="true" but Blazor does. In the end result you need either just disabled or an empty string. The razor compiler arranges that for you.

  • Related