Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/25/setting-the-label-color-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_color_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        CheckBox {
            fontWeight: bold;
            iconColor: green;
        }

        .selectedStyle {
            color: green;
            textRollOverColor: green;
            textSelectedColor: green;
            themeColor: green;
        }

        .unselectedStyle {
            color: red;
            textRollOverColor: red;
            textSelectedColor: red;
            themeColor: red;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var tgt:CheckBox = evt.currentTarget as CheckBox;
                if (tgt.selected) {
                    tgt.styleName = "selectedStyle";
                } else {
                    tgt.styleName = "unselectedStyle";
                }
            }
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="CheckBox"
            selected="false"
            styleName="unselectedStyle"
            change="checkBox_change(event);" />

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/24/setting-the-disabled-text-color-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_disabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="disabledColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="red" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="false" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:CheckBox id="checkBox2"
            label="CheckBox"
            selected="true"
            enabled="{checkBox.selected}"
            disabledColor="{colorPicker.selectedColor}" />

</mx:Application>

You can also set the disabledColor style in an external .CSS file or <Style/> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/24/setting-the-disabled-text-color-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_disabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        CheckBox {
            disabledColor: red;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="false" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:CheckBox id="checkBox2"
            label="CheckBox"
            selected="true"
            enabled="{checkBox.selected}" />

</mx:Application>

Or, you can set the disabledColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/24/setting-the-disabled-text-color-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_disabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                checkBox2.setStyle("disabledColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="disabledColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="false" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:CheckBox id="checkBox2"
            label="CheckBox"
            selected="true"
            enabled="{checkBox.selected}" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/24/setting-the-disabled-text-color-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_disabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        preinitialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.CheckBox;
            import mx.controls.ColorPicker;
            import mx.events.ColorPickerEvent;

            private var checkBox:CheckBox;
            private var checkBox2:CheckBox
            private var colorPicker:ColorPicker;

            private function init():void {
                colorPicker = new ColorPicker();
                colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);

                checkBox = new CheckBox();
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "disabledColor:";
                formItem1.addChild(colorPicker);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "enabled:";
                formItem2.addChild(checkBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                checkBox2 = new CheckBox();
                checkBox2.label = "CheckBox";
                checkBox2.selected = true;
                checkBox2.enabled = false;
                addChild(checkBox2);
            }

            private function colorPicker_change(evt:ColorPickerEvent):void {
                checkBox2.setStyle("disabledColor", evt.color);
            }

            private function checkBox_change(evt:Event):void {
                checkBox2.enabled = checkBox.selected;
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function button_click(evt:Event):void {
                var selArr:Array = [];
                var idx:int;
                var len:int = arr.length;
                for (idx=0; idx<len; idx++) {
                    if (checkBox[idx].selected) {
                        selArr.push(checkBox[idx].label);
                    }
                }

                var title:String = selArr.length + " of " + len + " item(s) selected.";
                var message:String = selArr.join("\\n");
                Alert.show(message, title);
            }

            private function doFilter(element:*, index:int, arr:Array):Boolean {
                return element.selected;
            }

            private function checkBox_change(evt:Event):void {
                var ch:CheckBox = evt.currentTarget as CheckBox;
                Alert.show(ch.getRepeaterItem().data);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red" data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green" data="haloGreen" />
        <mx:Object label="Blue" data="haloBlue" />
    </mx:Array>

    <mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10">
        <mx:Repeater id="checkBoxRepeater" dataProvider="{arr}">
            <mx:CheckBox id="checkBox"
                    label="{checkBoxRepeater.currentItem.label}"
                    data="{checkBoxRepeater.currentItem.data}"
                    change="checkBox_change(event);" />
        </mx:Repeater>
        <mx:ControlBar horizontalAlign="right">
            <mx:Button id="button"
                    label="Click me"
                    emphasized="true"
                    click="button_click(event);" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/21/setting-an-error-string-on-a-checkbox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                if (checkBox.selected) {
                    checkBox.errorString = "";
                } else {
                    checkBox.errorString = "You must click here to continue";
                }
            }
        ]]>
    </mx:Script>

    <mx:Panel width="100%" height="100%">
        <mx:TextArea id="textArea"
                condenseWhite="true"
                editable="false"
                textAlign="justify"
                width="100%"
                height="100%">
            <mx:htmlText>
                <![CDATA[
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vitae massa. Curabitur sed dolor. Maecenas risus lacus, pretium eget, tempor vestibulum, mattis vitae, sem. Pellentesque ligula nisi, sagittis sit amet, tincidunt vitae, volutpat non, arcu. Mauris non arcu. In molestie nunc. Nam molestie dui lacinia massa commodo vehicula. Ut sed ante sit amet tellus aliquam rhoncus. Nunc orci urna, dictum eget, faucibus vitae, tempus vel, dui. Vestibulum quis arcu. Morbi felis justo, hendrerit quis, tempus ac, elementum sit amet, quam. Proin congue, leo eget aliquet rhoncus, tellus lectus varius ipsum, ac ultrices erat ligula non justo. Nunc porttitor diam vel dolor luctus semper. Ut non eros volutpat mi condimentum ornare. Praesent quis nunc et libero pulvinar pretium. Sed leo lorem, fringilla vel, sodales ac, suscipit ut, nunc. Vestibulum faucibus elit. Vivamus pharetra libero ut arcu. Curabitur sit amet tellus.</p>
                    <p>Fusce sagittis. Suspendisse potenti. Aliquam velit sapien, porta at, cursus sed, pellentesque sit amet, libero. Duis aliquet purus eget mauris. Curabitur a ipsum. Nulla facilisi. Etiam porta, odio quis semper cursus, est ante volutpat massa, quis blandit orci dui ut nibh. Nulla sodales leo sit amet ligula. Suspendisse ultrices. Proin vitae felis.</p>
                    <p>Maecenas pellentesque, ligula blandit venenatis semper, magna quam laoreet urna, ut iaculis urna urna eu tortor. In interdum, dolor ut lobortis congue, massa velit egestas lectus, sed commodo sapien risus et ante. Proin id erat ac nibh luctus aliquet. Vestibulum sagittis turpis non est. Suspendisse ipsum ligula, suscipit vel, feugiat eu, commodo non, risus. Integer suscipit sapien quis lectus. Aliquam dictum, magna quis pellentesque aliquet, felis pede porttitor quam, at luctus risus odio eu ante. Phasellus a purus. Ut id dui nec diam congue auctor. Nullam nec pede. Vivamus ullamcorper iaculis urna.</p>
                    <p>Ut ultrices. Praesent convallis massa sit amet ipsum. Aenean varius posuere erat. Sed vulputate, purus eu consectetuer molestie, risus dui egestas augue, sed cursus sapien orci a turpis. Cras erat metus, ullamcorper quis, sollicitudin quis, suscipit vitae, ipsum. Suspendisse metus dolor, aliquet sit amet, vulputate sit amet, euismod ac, tortor. Nulla facilisi. Vestibulum ac sem at arcu blandit pretium. Sed faucibus, dolor sit amet viverra aliquet, mi arcu sollicitudin ante, at consequat risus mauris sit amet ante. Phasellus mi tellus, blandit ac, tempor a, pulvinar vel, ligula. Pellentesque molestie est sed nulla. Nam vel quam at magna pulvinar gravida. Curabitur sed neque eget enim tempor volutpat. Praesent varius. Nulla varius pulvinar nunc. Nulla interdum eros sed quam.</p>
                    <p>Aliquam erat volutpat. Aliquam vestibulum. Mauris fringilla, enim vitae viverra aliquet, nunc purus pretium massa, congue viverra lectus lacus in est. Sed posuere augue a tellus. Ut nunc leo, luctus ut, consequat scelerisque, ornare eu, metus. Duis et purus. Nunc hendrerit nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vel neque. Proin mi. Aliquam sollicitudin, nulla et tincidunt luctus, orci magna eleifend velit, placerat tempor ipsum sem vitae tortor. Etiam ac urna placerat erat pulvinar venenatis. Phasellus convallis diam in metus. Donec dui risus, sollicitudin vel, pulvinar sit amet, luctus sed, massa. Quisque ultrices lacus vel eros.</p>
                ]]>
            </mx:htmlText>
        </mx:TextArea>
        <mx:ControlBar>
            <mx:CheckBox id="checkBox"
                    label="I have read and agreed to your license"
                    errorString="You must click here to continue"
                    change="checkBox_change(event);"
                    width="100%" />
            <mx:Button label="Next >>"
                    enabled="{checkBox.selected}" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

For some similar examples, see “Checking to see if a Flex CheckBox is selected before allowing a user to press a Button”.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/06/truncating-the-label-on-a-flex-checkbox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:String id="str">The quick brown fox jumped over the lazy dog.</mx:String>

    <mx:Form>
        <mx:FormItem label="default:">
            <mx:CheckBox id="checkBox1"
                    label="{str}" />
        </mx:FormItem>
        <mx:FormItem label="width = 200:">
            <mx:CheckBox id="checkBox2"
                    label="{str}"
                    width="200" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:vo="*"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.events.CollectionEvent;
            import mx.utils.ObjectUtil;
 
            private function init():void {
                arrColl.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
            }
 
            private function arrColl_collectionChange(evt:CollectionEvent):void {
                try {
                    var tArr:Array = arrColl.source.filter(selectedOnly);
                    textArea.text = ObjectUtil.toString(tArr);
                    lbl.text = tArr.length.toString() + " item(s) selected";
                } catch (err:Error) {
                    // ignore.
                }
            }
 
            private function selectedOnly(item:ListItemValueObject, idx:uint, arr:Array):Boolean {
                return item.isSelected;
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <vo:ListItemValueObject label="One" isSelected="true" />
        <vo:ListItemValueObject label="Two" isSelected="true" />
        <vo:ListItemValueObject label="Three" isSelected="true" />
        <vo:ListItemValueObject label="Four" isSelected="true" />
        <vo:ListItemValueObject label="Five" isSelected="false" />
        <vo:ListItemValueObject label="Six" isSelected="false" />
        <vo:ListItemValueObject label="Seven" isSelected="false" />
        <vo:ListItemValueObject label="Eight" isSelected="false" />
        <vo:ListItemValueObject label="Nine" isSelected="false" />
        <vo:ListItemValueObject label="Ten" isSelected="false" />
        <vo:ListItemValueObject label="Eleven" isSelected="false" />
        <vo:ListItemValueObject label="Twelve" isSelected="false" />
    </mx:Array>
 
    <mx:ArrayCollection id="arrColl"
            source="{arr}"
            collectionChange="arrColl_collectionChange(event);" />
 
    <mx:Panel id="panel"
            title="Items"
            status="{arrColl.length} total"
            styleName="opaquePanel">
        <mx:List id="list"
                dataProvider="{arrColl}"
                alternatingItemColors="[#EEEEEE, white]"
                width="150"
                rowCount="8">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:CheckBox selectedField="isSelected"
                            change="onChange(event);">
                        <mx:Script>
                            <![CDATA[
                                private function onChange(evt:Event):void {
                                    data.isSelected = !data.isSelected;
                                }
                            ]]>
                        </mx:Script>
                    </mx:CheckBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:List>
        <mx:ControlBar horizontalAlign="right">
            <mx:Label id="lbl" />
        </mx:ControlBar>
    </mx:Panel>
 
    <mx:TextArea id="textArea"
            verticalScrollPolicy="on"
            width="100%"
            height="{panel.height}" />
 
</mx:Application>

View ListItemValueObject.as

/**
 * http://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/
 */
package {
    public class ListItemValueObject {
 
        [Bindable]
        public var label:String;
 
        [Bindable]
        public var isSelected:Boolean;
 
        public function ListItemValueObject() {
            super();
        }
    }
}

View source is enabled in the following example.

For lots more information on item renderers from somebody who knows what he’s talking about, check out Alex Harui’s excellent item renderer articles: “Thinking About Item Renderers” and “More Thinking About Item Renderers”.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/29/adding-your-own-custom-checkbox-control-icons-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        CheckBox {
            /* Unselected icons */
            upIcon: Embed(source="assets/bullet_red.png");
            overIcon: Embed(source="assets/bullet_red.png");
            downIcon: Embed(source="assets/bullet_yellow.png");
            /* Selected icons */
            selectedUpIcon: Embed(source="assets/bullet_green.png");
            selectedOverIcon: Embed(source="assets/bullet_green.png");
            selectedDownIcon: Embed(source="assets/bullet_yellow.png");
        }
    </mx:Style>

    <mx:CheckBox id="cheezburger"
            label="I can has cheezburger?"
            fontSize="12"
            fontWeight="bold" />

</mx:Application>

View source is enabled in the following example.