Event: onChange dropdown list - kendo-ui

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);
}
}