事件：onChange 下拉列表

Question

这里我有一个元素：

<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 函数，如果我选择 Severity 的值小于 8，则 Note 字段的文本框应该被锁定，当 Severity 大于 8 时，Note 字段的文本框将被解锁? 谢谢。

Answer 1

您可以通过执行以下操作来完成此操作（此处为未经测试的代码！）

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