how to disable/enable multiple checkboxes inside of a radcombobox using jquery?

Question

I have an ItemTemplate which where each item contains a RadComboBox with checkboxes enabled. I need to apply some business logic that will disable or enable checkboxes in the combobox depending on the user's selections. What I need to know, is how to disable those checkboxes. So for example:

<Combobox CssClass="Assignees">
    <cb> <Item 1>
    <cb> <Item 2>
    <cb> <Item 3>
    <cb> <Item 4>

If item 4's checkbox is selected, then all other checkboxes are disabled. If it's unselected, then everything is re-enabled. If items 1,2 or 3 are selected, then Item 4's checkbox is disabled.

I've tried something like:

$(".AssigneeTag").find(":checkbox").click(
    function () {
        var allCheckboxes = $(this).closest(".AssigneeTag").find(":checkbox");
    });

Just to get all of the checkboxes in the combobox. This is not returning anything. Then I know I need to go from here to inspect the itemdata to determine the "type" so that I can figure out what to hide or show.

Can anyone point me in the right direction?

EDIT: As requested, the HTML. I was able to dig this out of it. Just looking at it, I'm not able to wrap my head around what to do. The items loaded into the item list are actually objects that contain 3 fields; a name, a guid, and a type. I'll need to look at the type to apply the business logic, but I'm not seeing it even appearing here:

<div id="ctl00_MainContent_lsvTickets_ctrl0_lsvActions_cboAssignTo" class="RadComboBox RadComboBox_Default AssigneeTag" ItemDataBound="Assignees_Bound" style="width:160px;">
    <table summary="combobox" style="border-width:0;border-collapse:collapse;table-layout:fixed;width:100%">
        <tr class="rcbReadOnly">
            <td style="margin-top:-1px;margin-bottom:-1px;width:100%;" class="rcbInputCell rcbInputCellLeft">
                <input name="ctl00$MainContent$lsvTickets$ctrl0$lsvActions$cboAssignTo" type="text" class="rcbInput" id="ctl00_MainContent_lsvTickets_ctrl0_lsvActions_cboAssignTo_Input" value="" style="display: block;" readonly="readonly" />
            </td>
            <td style="margin-top:-1px;margin-bottom:-1px;" class="rcbArrowCell rcbArrowCellRight"><
                a id="ctl00_MainContent_lsvTickets_ctrl0_lsvActions_cboAssignTo_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
            </td>
        </tr>
    </table>

    <div class="rcbSlide" style="z-index:6000;">
        <div id="ctl00_MainContent_lsvTickets_ctrl0_lsvActions_cboAssignTo_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default " style="float:left;display:none;">
            <div class="rcbScroll rcbWidth" style="width:100%;">
                <ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
                    <li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />Mike ITTest</li>
                    <li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />Jeremy Stafford</li>
                    <li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />John Bell Test (Info. Tech.)</li>
                    <li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />Mike ITTest (Info. Tech.)</li>
                    <li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />AG Cust Support</li>
                    <li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />AG Eng Support</li>
                    <li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />AG HR Support</li>
                    <li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />AG IT Support</li>
                </ul>
            </div>
        </div>
    </div>
    <input id="ctl00_MainContent_lsvTickets_ctrl0_lsvActions_cboAssignTo_ClientState" name="ctl00_MainContent_lsvTickets_ctrl0_lsvActions_cboAssignTo_ClientState" type="hidden" />
</div>

Since you're stuck in the muddy abstraction of Telerik controls, step back and look at the HTML output on the client. Show us the HTML too, since your jQuery needs to work with it. — Diodeus - James MacFarlane, Mar 23 '12 at 20:44

score 0 · Answer 1 · answered Mar 24 '12 at 02:04

Well, to start with, there is a syntax error in your HTML that wouldnt work for me till I fixed it.

See Here: (error in return character after "<" before the tag "a")

<td style="margin-top:-1px;margin-bottom:-1px;" class="rcbArrowCell rcbArrowCellRight"><
    a id="ctl00_MainContent_lsvTickets_ctrl0_lsvActions_cboAssignTo_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
</td> //  also see no reason for display block on "a" as it will cause it to have 0 width and be invisible (more or less)

Changed Too

<td style="margin-top:-1px;margin-bottom:-1px;" class="rcbArrowCell rcbArrowCellRight">
    <a id="ctl00_MainContent_lsvTickets_ctrl0_lsvActions_cboAssignTo_Arrow" style="overflow: hidden;position: relative;outline: none;">select</a>
</td>

Next, the check box issue, I wasn't sure which exact thing you wanted checked and unchecked, so I add a checkbox labeled "Check All" that you can click to check all, or if you uncheck an name, then check all is unchecked as well. See the working jsFiddle HERE and see the jQuery code below:

$(function() {
    $("#rcbCheckAll").on("change", function(e) {
        $(".rcbCheckBox").prop("checked", $(this).prop("checked"));
    });
    $(".rcbCheckBox").on("change", function(e) {
        if (!$(this).is("checked")) $("#rcbCheckAll").prop("checked", false);
    });
})

how to disable/enable multiple checkboxes inside of a radcombobox using jquery?

1 Answers1