Reputation: 65
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>
Upvotes: 0
Views: 4924
Reputation: 21465
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.
Upvotes: 2