如何使用jquery禁用/启用radcombox内部的多个复选框

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

本文关键字：内部 复选框 radcombox 启用 何使用 jquery 禁用      更新时间：2023-09-26

我有一个ItemTemplate，其中每个项目都包含一个启用复选框的RadComboBox。我需要应用一些业务逻辑，根据用户的选择禁用或启用组合框中的复选框。我需要知道的是，如何禁用这些复选框。例如：

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

如果项目4的复选框被选中，那么所有其他复选框都将被禁用。如果未选中，则所有功能都将重新启用。如果选择了项目1、2或3，则项目4的复选框将被禁用。

我试过这样的东西：

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

只是为了得到组合框中的所有复选框。这不会返回任何内容。然后我知道我需要从这里检查itemdata以确定"类型"，这样我就可以找出隐藏或显示的内容。

有人能给我指正确的方向吗？

编辑：根据要求，HTML。我能够从中挖掘出来。光看它，我就无法思考该做什么。加载到项目列表中的项目实际上是包含3个字段的对象；名称、guid和类型。我需要查看应用业务逻辑的类型，但我甚至没有看到它出现在这里：

<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>

首先，您的HTML中有一个语法错误，在我修复它之前，它对我不起作用。

请参阅此处：（标签"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)

也更改了

<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>

接下来是复选框问题，我不确定你想要选中和取消选中哪一个，所以我添加了一个标记为"全选"的复选框，你可以单击它来全选，或者如果你取消选中一个名称，那么也取消选中它。请参阅此处的工作jsFiddle，并参阅下面的jQuery代码：

$(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);
    });
})​
相关文章：