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

Ahmed Salah Abed Elaziz 390 Reputation points
2023-05-31T20:11:41.8033333+00:00

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

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,380 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,495 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Zhi Lv - MSFT 32,091 Reputation points Microsoft Vendor
    2023-06-01T02:14:13.1966667+00:00

    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.

    image2


    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

    0 comments No comments