事件:onChange 下拉列表

Event: onChange dropdown list

我这里有一个元素:

<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>

如何在javascript中定义onSeverityChange函数,如果我selectSeverity的值小于8,那么Note字段的文本框应该被锁定,当Severity大于8时那么Note字段的文本框要解锁吗? 谢谢。

您可以通过执行以下操作来完成此操作(non-tested 此处为代码!)

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