How to set input textbox to readonly false when drop down list option selected =yes ?

Question

I work on blazor server side . i face issue i can't change read-only to false to input textbox when drop down list selected value yes .

so i need sample for razor page have drop down list with 3 values

0 select

1 Yes

2 No

and input text box

when page load for first time drop down will be select option as default value 0 and input textbox with read only true and user can't read and write on it

when change drop down selection to yes it will make input textbox with read-only false so user can read and write on textbox

Answer 1

Hi @Ahmed Salah Abed Elaziz

when page load for first time drop down will be select option as default value 0 and input textbox with read only true and user can't read and write on it when change drop down selection to yes it will make input textbox with read-only false so user can read and write on textbox

According to your description, I create a sample using the following code, it will use @attributes to add the readonly attribute based on the drop-down list selected value:

<select @onchange="SelectedChanged">
    <option value="0">select</option>
    <option value="1">Yes</option>
    <option value="2">No</option> 
</select>

<input @bind="inputValue" @attributes="SetReadonly()" />

@code { 
    public string SelectedOption { get; set; } = "0";
    private string inputValue = "Test data";
    private bool isreadonly { get; set; } = true; //by default, make the textbox readonly.
    private void SelectedChanged(ChangeEventArgs e)
    {
        if (e.Value is not null)
        {
            var selectedvalue = (string)e.Value;
            if (selectedvalue == "1") 
                isreadonly = false; 
            else 
                isreadonly = true; 
        }
    }
    Dictionary<string, object> SetReadonly()
    {
        var dict = new Dictionary<string, object>();
        if (isreadonly) dict.Add("readonly", "readonly");
        return dict;
    }
}

The output as below: when the selected option is select and No, the textbox is readonly, after selecting the Yes, the textbox is editable.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion