Disable Control/Set id property

[Joel]

I want to disable a combobox.  I have my example below.  The only way I see to do it is through a script, also shown.  If this script isn't the best way I'm open to suggestions.

However, for my script to work I need to know the id of the control.  My approach was picked up off other posts but doesn't seem to do anything.

ComboBox:

@(Html.Kendo().ComboBoxFor(x => x.Item.CountryCode)
    .Placeholder("Select Country...")
    .DataTextField("Name")
    .DataValueField("Code")
    .Filter(FilterType.Contains)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCountries", "Persons");
        });
    })
    .HtmlAttributes(new { style = "width: 100%", @id = "countryCodes" }))

 

What I get when I press F12 and get the source in the browser:

<span class="k-widget k-combobox k-combobox-clearable" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input name="Item.CountryCode_input" class="k-input" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" placeholder="Select Country..." style="" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="countryCodes_listbox" aria-busy="false" aria-activedescendant="79fa18f7-e213-4d76-be7a-e4eb980f85f2"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="countryCodes_listbox"><span class="k-icon k-i-arrow-60-down"></span></span></span><input id="countryCodes" name="Item.CountryCode" style="width: 100%; display: none;" type="text" value="" data-role="combobox" aria-disabled="false" aria-readonly="false"></span>

 

Form definition & Script:

<form asp-action="Edit" asp-all-route-data="routeKeys" onsubmit="onSubmit()">
...

<script>

    function onSubmit(e) {

        $("#name").attr("disabled", true);
        $("#Item_CountryCode").attr("disabled", true);
...

 

[Joel]

Disregard.  Such a thorough post... so thorough I see that the id value is actually in the result set.  lol

[Joel]

Actually, don't disregard. I picked this from the same example above.  Performing a "disable" on "countryCodes" does nothing.  I need it to prevent keyboard entry and prevent the drop-down. 

Not only do I need to disable a ComboBox, but I need to disable CheckBox, DatePicker and NumberTextBox.  The picker on the right side of each of these controls does not get disabled.  How do I do this?

<span class="k-widget k-combobox k-combobox-clearable" style="width: 100%;">
  <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default">
    <input name="Item.CountryCode_input" class="k-input" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" placeholder="Select Country..." style="" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="countryCodes_listbox" aria-busy="false" aria-activedescendant="c992e6b3-cbbc-479d-946a-4865b2e12cc4">
      <span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span>
      <span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="countryCodes_listbox">
        <span class="k-icon k-i-arrow-60-down"></span>
      </span>
  </span>
  <input id="countryCodes" name="Item.CountryCode" style="width: 100%; display: none;" type="text" value="US" data-role="combobox" aria-disabled="false" aria-readonly="false" disabled="disabled">
</span>

 

 

[Joel]

So, what I was trying to do... overall... is to prevent duplicate post-backs.  So, this was an attempt to disable the form.  I found a work around.  Seems like a simple control that Telerik could build.  Here is my code:

IsBusy.css

.isbusy {
    position: fixed;
    z-index: 99;
    opacity: .7;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: white;
    justify-content: center;
    align-items: center;
}

.isbusy > img {
    width: 100px;
    opacity: 1;
}

Button Click: showIsBusy()

<div class="row">
    <div class="col-md-4">
        <form name="form" asp-action="Edit" asp-all-route-data="@routeKeys">

 

...

            <div class="form-group">

                <input type="submit" value="Save" class="btn btn-default" onclick="showIsBusy()" />

                <input type="button" value="Cancel" onclick="history.go(-1)" class="btn" />

            </div>

        </form>

    </div>

</div>

 

<div class="isbusy" id="isbusy">

    <img src="~/images/IsBusy.gif" alt="Processing..." />

</div>

 

<script>

 

    $(document).ready(function () {

 

        $("#isbusy").hide();

    });

 

    function showIsBusy() {

        //alert("isBusy");

        $("#isbusy").show();

        $("form").submit();

    }

 

</script>

 

 

 

 

[Ivan Danchev]

Hello Joel,

The editor components (ComboBox, Pickers, etc.) can be disabled initially through the Enable configuration:

.Enable(false)

As for disabling them after initialization, this can be done through the enable API method. For example:

var combobox = $("#combobox").data("kendoComboBox");
combobox.enable(false);

Regards,
Ivan Danchev
Progress Telerik