The following example shows how you can set the text color on a disabled Flex CheckBox control by setting the disabledColor style.

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>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree