JQuery to Disable RadComboBox on CheckBox click

2 posts, 0 answers
  1. Kim
    Kim avatar
    15 posts
    Member since:
    Apr 2013

    Posted 25 Jun 2013 Link to this post

    I have a table that has a column of RadComboBox controls and a column of CheckBox controls so that each ComboBox has a CheckBox next to it. When the checkbox next to a ComboBox is checked/unchecked, I want to use JQuery to disable/enable the corresponding ComboBox. Each CheckBox has a "check-all" class. I am having trouble with the syntax for doing this, but I was able to get close using examples I found. The code below successfully enables and disables all ComboBox controls on the page (because of the "each" function). However, I just want to find the corresponding ComboBox next to the CheckBox, then disable it and I want to do this with only one function. 

    $('.check-all').click(function () {
        var checkbox = $(this).find('input:checkbox:first')
        $('.RadComboBox').each(function () {
            var combo = this.control;
            if (checkbox.is(':checked')) {
                combo.disable();
            }
            else {
                combo.enable();
            }
        });

    Here is another working example where I specify the CheckBox and the ComboBox specifically. But, I am trying to do this with a single function because I have 30 ComboBoxes and don't want to have to copy and maintain the below code 30 times.

    $('#<%= cbxOne.ClientID %>').click(function () {
        var combo = $find("<%= cmbOne.ClientID %>");
        if ($(this).is(':checked')) { combo.disable(); }
        else { combo.enable(); }
    })
  2. Plamen
    Admin
    Plamen avatar
    2959 posts

    Posted 27 Jun 2013 Link to this post

    Hi Kim,

     
    one way to achieve such scenario is to name your Checkboxes and RadComboBoxes with name that will let you associate them later on. Here is one way that worked properly at my side:

    <script type="text/javascript">
            function pageLoad() {
                var $ = $telerik.$;
                $(':checkbox').click(function () {
                    var comboobject = $("#"+this.id.substring(4, this.id.length));
                    var combo = $find(comboobject.attr("id"));
                    if ($(this).is(':checked')) { combo.disable(); }
                    else { combo.enable(); }
                })
            }
     
        </script>
            <table>
                <tr>
                    <td>
                        <telerik:RadComboBox runat="server" ID="RadComboBox1">
                            <Items>
                                <telerik:RadComboBoxItem Text="item1" />
                                <telerik:RadComboBoxItem Text="item2" />
                                <telerik:RadComboBoxItem Text="item3" />
                            </Items>
                         </telerik:RadComboBox>  
     
                    </td>
                    <td>
                        <asp:CheckBox runat="server" ID="ChBxRadComboBox1" AutoPostBack="false" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadComboBox runat="server" ID="RadComboBox2">
                            <Items>
                                <telerik:RadComboBoxItem Text="item1" />
                                <telerik:RadComboBoxItem Text="item2" />
                                <telerik:RadComboBoxItem Text="item3" />
                            </Items>
                         </telerik:RadComboBox>
                    </td>
                     <td>
                        <asp:CheckBox runat="server" ID="ChBxRadComboBox2" AutoPostBack="false" />
                    </td>
                </tr>
            </table>

    Hope this will be helpful.

    Regards,
    Plamen
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top