Event: onChange dropdown list

Question

Here i have an element:

<div id="prof_Severity" class="form-group row">
    <div class="col-md-3">
        @Html.Label("Severity:  *", htmlAttributes: new { @class = "control-label single-line-valignment" })
      
    </div>

    <div class="col-md-4">
        @(Html.Kendo().DropDownList()
    .Name("Severity")
    .BindTo(Enumerable.Range(1, 10))
    .OptionLabel("Select severity...")
    .HtmlAttributes(new { style = "width: 100%; text-align: center;" })
    .Events(e => e.Change("onSeverityChange"))
    .Value(Model.Severity.ToString())
        )
    </div>

    <div class="col-md-1" style="text-align: right;">
        @Html.Label("Note:", htmlAttributes: new { @class = "control-label single-line-valignment" })
    </div>

    <div class="col-md-4">
        @(Html.Kendo().TextBox().Name("SeverityNote").Value(Model.SeverityNotes).HtmlAttributes(new { type = "text", style = "width: 100%; max-width: 100%", placeholder = "Specify if \"Severity is equal 9 or 10\", selected " }))
          )
    </div>

</div>

How can i define the onSeverityChange function in javascript, if i select the value of Severity less than 8 then, the textbox of Note field shoud be locked and when Severity is bigger than 8 then the textbox of the Note field to be unlocked? Thank you.

Answer 1

You can accomplish that by doing something like the following (non-tested code here!)

function onSeverityChange() {
   var dropdownlist = $("#Severity").data("kendoDropDownList");

   var severityValue = dropdownlist.value();

   if (severityValue < 8) {
      //lock textbox
      $('#SeverityNote').prop("disabled", true);
   } else {
      //unlock textbox
      $('#SeverityNote').prop("disabled", false);
   }
}