Disable unselected items in a List After 5 items are selected

Question

Im new to flex development. I have a dynamically data bound list component. I need to restrict user from selecting more than 5 items.

List is made with checkboxes and labels

getSelectionCount() method returns the number of currently selected items.

Here is my code

<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. How can disable the checkboxes which user has not selected when user selection count exceeds 5 ?

2 I also need to enable all check boxes back if user unticks some checks in order that selection count go below 5

Thank You

Answer 1

First you need to add enabled property in your arraycollection like below which also make bindable in itemRenderer enabled="{data.enabled}". If count reach 5 we disable all button except selected one which the help of enabled property and magic here we need to update arraycollection items by using mx.collections.IList.itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void method so that only it will reflect disable the other checkboxes. In our case use outerDocument.chkLst.dataProvider.itemUpdated(item);

Sample arraycollection structure:

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