2012-03-23 55 views
0

我有一个ItemTemplate,其中每个项目包含一个启用了复选框的RadComboBox。我需要应用一些业务逻辑,根据用户的选择禁用或启用组合框中的复选框。我需要知道的是如何禁用这些复选框。例如:如何使用jquery在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"); 
    }); 

只是为了让所有在下拉列表中的复选框。这不会返回任何东西。然后我知道我需要从这里开始检查项目数据以确定“类型”,以便我可以找出要隐藏或显示的内容。

任何人都可以指向正确的方向吗?编辑: 根据要求,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> 
+0

既然你停留在Telerik控制泥泞的抽象,后退一步,看看客户端的HTML输出。向我们展示HTML,因为您的jQuery需要使用它。 – 2012-03-23 20:44:24

回答

0

好了,开始用,有你的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> 

接下来,复选框问题,我不确定你想要哪个确切的东西被选中和取消选中,所以我添加了一个标记为“全部选中”的复选框,您可以单击以选中所有选项,或者如果取消选中某个名称,则选中所有选项都不选中,因为我们二。 See the working jsFiddle HERE,看看下面的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); 
    }); 
})​