JQuery to Disable RadComboBox on CheckBox click

[Kim]

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(); }
})

[Plamen]

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