Enable / Disable checkbox depending on value in Kendo-UI dropdown list

Question

I have a Kendo-Ui dropdownlist that is populated with 3 values. If the user selects one of the values I need to enable a checkbox. If either of the other 2 values are selected then the checkbox needs to be disabled.

I am using .Events and e.Select and have created the function but I am not sure where to go next

    <div class="row">
        <div class="form-group col-sm-3">
            <label for="Severity" class="form-label">Severity</label>
            @(Html.Kendo().DropDownList()
                  .Name("SeverityId")
                  .DataTextField("Name")
                  .DataValueField("Id")
                  .OptionLabel("Select Severity...")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("Get", "Severity", new { area = "Admin" });
                      });
                  })
                  .HtmlAttributes(new {style = "width: 100%"})
                  .Events(e =>
                  {
                      e.Select("onSeverityChange");
                  })
                  )
        </div>
        <div class="form-group col-sm-1">
            <input type="checkbox" class="form-control k-checkbox" id="checkboxFatal" disabled="disabled" />
            <label class="k-checkbox-label" for="checkboxFatal">Fatal</label>
        </div>

        <script>
            function onSeverityChange(e) {
                if (e.dataItem.Name) {
                    $("#Fatal").enabled = true;
                } else {

                }
            }
        </script>

Answer 1

I believe your logic is correct, but the problem is how you're trying to enable/disabled the element. Try:

$("#checkboxFatal").attr("disabled", true);

First, the real id of the element is checkboxFatal and not Fatal . Then you need to use attr() to change any attribute value in jQuery.