Can't disable Telerik dropdown list with JQuery

Question

I'm trying to use JQuery to enable a Telerik RadComboBox based on the selection of another Telerik RadComboBox.

Use case: User comes to page, ddlRequired is enabled, ddlListItems is disabled. If user selects "Required" then I want ddlListItems to then be enabled. Conversely, if "Optional" is selected, I want to disable ddlListItems.

                <telerik:RadComboBox ID="ddlRequired" runat="server" Width="80px" ShowDropDownOnTextboxClick="true" EnableEmbeddedSkins="false" Skin="Classic"  OnClientSelectedIndexChanged="OnSelectedIndexChanged">
                    <Items>
                        <telerik:RadComboBoxItem Text="Required" Value="1" />
                        <telerik:RadComboBoxItem Text="Optional" Value="0" />
                    </Items>
                </telerik:RadComboBox>

                <telerik:RadComboBox ID="ddlListItems" runat="server" Width="200px" ShowDropDownOnTextboxClick="true" EnableEmbeddedSkins="false" Skin="Classic" Enabled="false">
                    <ItemTemplate>
                        <asp:TextBox ID="txtBoxQ1" runat="server" Width="160"/>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadComboBoxItem />
                        <telerik:RadComboBoxItem />
                    </Items>
                </telerik:RadComboBox>

Here's where I've left off after trying several approaches. I realize it's not complete.

function OnSelectedIndexChanged()
{
    var ddl = $find("<%=ddlListItemsQ1.ClientID%>");
    ddl.set_enabled(false);
}

score 2 · Answer 1 · answered Sep 12 '11 at 16:31

While this isn't really jQuery, more just plain old regular JavaScript, using the client-side API of the RadComboBox, specifically the article on the RadComboBoxItem (for the enable function) and the OnClientSelectedIndexChanged article (for details on the eventArgs) I created the following quick little snippet:

    function OnSelectedIndexChanged(sender, eventArgs) {
        var selectedItem = eventArgs.get_item();
        if (selectedItem.get_text() === "Required") {
            var ddlListItemsClient = $find('<%= ddlListItems.ClientID %>');
            ddlListItemsClient.enable();
        }
    }

I just tested it with the ASPX code you provided and it worked fine.

score 0 · Answer 2 · edited Oct 09 '14 at 20:16

disableChildElements( document.getElementById(<%=dropdown_Id.ClientId%>"))

function disableChildElements(objId)
{
    var theObject = document.getElementById(objId);
    var level = 0;
    TraverseDOM(theObject, level, disableElement);
}

function TraverseDOM(obj, lvl, actionFunc)
{
    for (var i = 0; i < obj.childNodes.length; i++)
    {
        var childObj = obj.childNodes[i];
        if (childObj.tagName)
        {
            actionFunc(childObj);
        }
        TraverseDOM(childObj, lvl + 1, actionFunc);
    }
}

function disableElement(obj)
{
    obj.disabled = true;
}

score 0 · Answer 3 · answered Mar 14 '14 at 06:18

This doesn't work!

$('#ddlListItems').attr('Enabled', 'false');

This works!

    @(Html.Kendo().DropDownListFor(m => m.RoleId)
        .Name("RoleId")

    ...

    <script type="text/javascript">
      var ddlist = $("#RoleId").data("kendoDropDownList")
      ddlist.enable(false);

   ...

score -1 · Answer 4 · edited Dec 17 '13 at 15:54

-1

Hello,

The RadComboBox has a jQuery object created on the client-side. In order to disable it, you need to call the disable() function. To enable it, you call the enable() function.

Like so:

    var combo = $find("<%=RadComboBox1.ClientID%>");
    combo.disable();

Or:

    $(".rcbInput").attr('disabled', 'disabled');

I hope that helps.

edited Dec 17 '13 at 15:54

answered Oct 04 '13 at 06:57

Abhishek Sharma

281
2
6

score -1 · Answer 5 · answered Sep 08 '11 at 23:26

Bit of a stab at it, I know nothing about telerik and I'm useless with ASP/C#, but this may work :)

$(document).ready(function(){
    $('#ddlRequired telerik:RadComboBoxItem').change(function()
    {
        if ($(this).val()) == true)
            $('#ddlListItems').attr('Enabled', 'true');
        else
            $('#ddlListItems').attr('Enabled', 'false');
    });
});

Can't disable Telerik dropdown list with JQuery

5 Answers5