选择 5 个项目后禁用列表中未选择的项目

Question

我是 flex 开发的新手。我有一个动态数据绑定列表组件。我需要限制用户选择超过 5 个项目。

列表由复选框和标签组成

getSelectionCount() 方法返回当前选中项的数量。

这是我的代码

<s:VGroup width="100%" height="100%">           
    <s:List id="chkLst" visible="{isMultipleSelectionAllowed}" width="100%" height="100%" borderVisible="false" 
            fontFamily="segoeui"
            dataProvider="{filteredDataSet}" >
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>

                    <fx:Script>
                        <![CDATA[
                            import mx.controls.Alert;       

                            //-----------------------------------------------
                            //
                            //  Checkbox select
                            //
                            //-----------------------------------------------


                            protected function chk_clickHandler(event:MouseEvent):void
                            {
                                var selection:Array = new Array();

                                for each(var item:Object in outerDocument.chkLst.dataProvider)
                                {           
                                    selection.push(item);
                                }

                                var count:int = 0;
                                for each(var sItem:Object in selection)
                                {
                                    outerDocument.setSelectionCount(0);

                                    if(sItem.selected)
                                    {                                       
                                        count++;
                                    }
                                    outerDocument.setSelectionCount(count);
                                }

                                Alert.show(outerDocument.getSelectionCount()+"","test");

                                if(CheckBox(event.target).selected && outerDocument.getSelectionCount() <= 5){

                                        outerDocument.setSelectionCount(outerDocument.getSelectionCount()+1);

                                }


                                if(outerDocument.getSelectionCount() >= 6){


                                }

                            }
                        ]]>
                    </fx:Script>

                    <s:HGroup width="100%" height="30" gap="2" paddingLeft="5" paddingRight="5" verticalAlign="middle" clipAndEnableScrolling="true">
                        <s:CheckBox id="chk" 
                                    label="{data.label}" change="{data.selected = chk.selected}" selected="{data.selected}" 
                                    maxWidth="215" click="chk_clickHandler(event)" />
                    </s:HGroup>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>   
    </s:List>

1. 当用户选择次数超过 5 时，如何禁用用户未选择的复选框？

2 如果用户取消选中某些检查，我还需要重新启用所有复选框，以使选择计数低于 5

谢谢

Answer 1

首先，您需要在您的数组集合中添加enabled 属性，如下所示，在 itemRenderer enabled="{data.enabled}" 中也添加make bindable。如果计数达到 5，我们禁用所有按钮，除了选中的按钮，在启用属性和魔法的帮助下，我们需要使用 mx.collections.IList.itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void 方法更新 arraycollection 项目，以便只有它会反映禁用其他复选框。在我们的例子中使用 outerDocument.chkLst.dataProvider.itemUpdated(item);

示例数组集合结构：

        <fx:Declarations>   
            <s:ArrayCollection id="filteredDataSet" >
                <fx:Object selected="false" enabled="true" label="one"/>
                <fx:Object selected="true"  enabled="true" label="two"/>
                <fx:Object selected="false" enabled="true" label="three"/>
                <fx:Object selected="false" enabled="true" label="four"/>
                <fx:Object selected="false" enabled="true" label="five"/>
                <fx:Object selected="false" enabled="true" label="six"/>
                <fx:Object selected="false" enabled="true" label="seven"/>
                <fx:Object selected="false" enabled="true" label="eight"/>
                <fx:Object selected="false" enabled="true" label="nine"/>                   
            </s:ArrayCollection>

        </fx:Declarations>

    <s:List id="chkLst" width="100%" height="100%" borderVisible="false" 
            fontFamily="segoeui"
            dataProvider="{filteredDataSet}" >
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>                        
                    <fx:Script>
                        <![CDATA[
                            import mx.controls.Alert;       

                            protected function chk_clickHandler(event:MouseEvent):void
                            {
                                data.selected = chk.selected;

                                var selection:Array = [];

                                for each(var item:Object in outerDocument.chkLst.dataProvider)
                                {       
                                    if(item.selected)
                                        selection.push(item);
                                }                               

                                if(selection.length>=5)
                                {
                                    for each(var item:Object in outerDocument.chkLst.dataProvider){      
                                        item.enabled = item.selected;                                                               
                                        outerDocument.chkLst.dataProvider.itemUpdated(item);
                                    }
                                }else{
                                    for each(var item:Object in outerDocument.chkLst.dataProvider){      
                                        item.enabled = true;                                                        
                                        outerDocument.chkLst.dataProvider.itemUpdated(item);
                                    }
                                }

                            }
                        ]]>
                    </fx:Script>

                    <s:HGroup width="100%" height="30" gap="2" paddingLeft="5" paddingRight="5" verticalAlign="middle" clipAndEnableScrolling="true">
                        <s:CheckBox id="chk" label="{data.label}" selected="{data.selected}" enabled="{data.enabled}" 
                                    maxWidth="215" click="chk_clickHandler(event)" />
                    </s:HGroup>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>   
    </s:List>