MVC5 dynamically disable textbox based on another textbox value

Question

I have MVC5 project and have 2 text box's fields(client id, document id) and one drop-down list.

I would like dynamically enable or disable client id text box and drop down list based on document id value, for example, if I wrote something in document id text box I would like to see client id text box and drop down list disabled, if I delete text from document id text box I would like to see enabled client id text box and drop-down list.

So far I have done research and to be honest, could not manage to find an exact answer. I read something about jquery but I am very weak at javascript.

Here is my code. How can I achieve the desired result?

<span>@Html.DisplayNameFor(model => model.ClientId).ToString():</span>
@Html.TextBox("ClientId", Model.Count()>0? Model.FirstOrDefault().ClientId:"", new { @class = "inline" })

<span>@Html.DisplayNameFor(model=>model.DocumentIdentificationId).ToString():</span>
@Html.TextBox("DocumentIdentificationId", Model.Count() > 0 ? Model.FirstOrDefault().DocumentIdentificationId: "", new {@class = "inline" })

<span>@Html.DisplayNameFor(model => model.DocumentType).ToString():</span>
@Html.DropDownList("DocumentTypes", new SelectList(documentTypes, "DocType", "DocName"),"", new { @class = "inline" })

Hien Nguyen · Accepted Answer · 2019-04-26 14:48:58Z

3

You can write a script to do this.

Because @Html.TextBox("ClientId", Model.Count()>0? Model.FirstOrDefault().ClientId:"", new { @class = "inline" }) will generate a input tag with id = ClientId

You can use change event or keyup event for your requirement.

$("#ClientId").keyup(function(){
   if($(this).val() != ""){
      $("#DocumentIdentificationId").attr("disabled", "disabled"); 
      $("#DocumentTypes").attr("disabled", "disabled"); 
   }else{
      $("#DocumentIdentificationId").prop("disabled", false); 
      $("#DocumentTypes").prop("disabled", false); 
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <input type="text" id="ClientId" />

   <input type="text" id="DocumentIdentificationId" />

    <select id="DocumentTypes">
       <option>Test<option>
    </select>

edited Apr 26, 2019 at 14:48

answered Apr 26, 2019 at 14:42

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

So_oP Over a year ago

How can i call this function if i do not press any button to trigger this script?

Hien Nguyen Over a year ago

You can handle keyup event if you want press, it disable imtemediately

Collectives™ on Stack Overflow

MVC5 dynamically disable textbox based on another textbox value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related