Checking to see if a Flex CheckBox is selected before allowing a user to press a Button

The following example shows a few different ways of checking to see if the user selected a CheckBox control before allowing them to click a Button control. Got other tips? Leave them in the comments!

Full code after the jump.

1. Check to see if the selected property of the CheckBox instance is true:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/checking-to-see-if-a-flex-checkbox-is-selected-before-allowing-a-user-to-press-a-button/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function isChecked():void {
                if (!checkBox.selected) {
                    Alert.show("You must agree to the EULA before continuing.");
                } else {
                    Alert.show("Continuing...");
                }
            }
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="I have read and agree with the EULA..." />

    <mx:Button label="Continue"
            click="isChecked();" />

</mx:Application>

View source is enabled in the following example.

2. Bind the Button control’s enabled property to the CheckBox control’s selected property:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/checking-to-see-if-a-flex-checkbox-is-selected-before-allowing-a-user-to-press-a-button/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:CheckBox id="checkBox"
            label="I have read and agree with the EULA..." />

    <mx:Button label="Continue"
            enabled="{checkBox.selected}" />


</mx:Application>

View source is enabled in the following example.

3. Set the Button control’s errorString property when the user rolls their mouse over the button. Add an if statement in the Button control’s click event handler that checks to see if the button’s error string is an empty string (or you could check if the check box is selected):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/checking-to-see-if-a-flex-checkbox-is-selected-before-allowing-a-user-to-press-a-button/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function button_rollOver(evt:MouseEvent):void {
                if (!checkBox.selected) {
                    button.errorString = "You must agree to the EULA before continuing.";
                }
            }

            private function button_rollOut(evt:MouseEvent):void {
                button.errorString = "";
            }

            private function button_click(evt:MouseEvent):void {
                if (button.errorString.length == 0) {
                    Alert.show("Continuing...");
                }
            }
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="I have read and agree with the EULA..." />

    <mx:Button id="button"
            label="Continue"
            rollOver="button_rollOver(event);"
            rollOut="button_rollOut(event);"
            click="button_click(event);" />

</mx:Application>

View source is enabled in the following example.

12 thoughts on “Checking to see if a Flex CheckBox is selected before allowing a user to press a Button

  1. You could always combine #2 and #3. Even if the Button control has its enabled property set to false, the error string will display when you roll over the button. A “win-win”. I just liked #3 because it seemed the least intrusive.

    BFF,
    Peter

  2. I’m having a little problem with this script.

    I’m using the same button in different states, and I’m just using the function to make the button go to the next state, depending on which state its already in. However, lets say in state 1 i want the button enabled, but in state 2 I want it to be disabled, and only enabled if the checkbox is selected, i used the

    However, when I do so, the button doesn’t enable itself as soon as the checkbox is selected, but if i select the checkbox, go back to state 1, and then return to state 2, then the button is enabled.

    Any insight on how to fix this?

    -Nick

  3. Nevermind, I’ve figured the problem out. However, would it be possible to have multiple checkboxes, and if any of them are selected, the button would appear?

  4. Nick,

    Do either of these work for you?

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    
        <mx:Panel title="Any" width="320">
            <mx:CheckBox id="check1a" label="Check 1.A" />
            <mx:CheckBox id="check2a" label="Check 2.A" />
            <mx:CheckBox id="check3a" label="Check 3.A" />
            <mx:ControlBar>
                <mx:Button label="Button A" enabled="{check1a.selected || check2a.selected || check3a.selected}" />
            </mx:ControlBar>
        </mx:Panel>
    
        <mx:Panel title="All" width="320">
            <mx:CheckBox id="check1b" label="Check 1.B" />
            <mx:CheckBox id="check2b" label="Check 2.B" />
            <mx:CheckBox id="check3b" label="Check 3.B" />
            <mx:ControlBar>
                <mx:Button label="Button B" enabled="{check1b.selected &amp;&amp; check2b.selected &amp;&amp; check3b.selected}" />
            </mx:ControlBar>
        </mx:Panel>
    
    </mx:Application>
    

    Or, using ActionScript instead of MXML:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    
        <mx:Script>
            <![CDATA[
                private function chkA():void {
                    btnA.enabled = (check1a.selected || check2a.selected || check3a.selected);
                }
                private function chkB():void {
                    btnB.enabled = (check1b.selected && check2b.selected && check3b.selected);
                }
            ]]>
        </mx:Script>
    
        <mx:Panel title="Any" width="320">
            <mx:CheckBox id="check1a" label="Check 1.A" change="chkA();" />
            <mx:CheckBox id="check2a" label="Check 2.A" change="chkA();" />
            <mx:CheckBox id="check3a" label="Check 3.A" change="chkA();" />
            <mx:ControlBar>
                <mx:Button id="btnA" label="Button A" creationComplete="chkA();" />
            </mx:ControlBar>
        </mx:Panel>
    
        <mx:Panel title="All" width="320">
            <mx:CheckBox id="check1b" label="Check 1.B" change="chkB();" />
            <mx:CheckBox id="check2b" label="Check 2.B" change="chkB();" />
            <mx:CheckBox id="check3b" label="Check 3.B" change="chkB();" />
            <mx:ControlBar>
                <mx:Button id="btnB" label="Button B" creationComplete="chkB();" />
            </mx:ControlBar>
        </mx:Panel>
    
    </mx:Application>
    

    Peter

  5. Thank you so much, I used the XML example (I’m more familiar with XML than actionscript) and it worked perfectly. I have one last question/request however.

    In the project I’m using, I use a seperate MXML file and put it into the main project, and the way FLEX refers to it is by using some command that I haven’t been able to find any information online. I was wondering if you knew how to have a checkbox inside this seperate MXML file and have it make the button appear in the main MXML file. I’m sorry if it’s not too clear.

    -Nick

  6. Thanks for the example.I got question –

    How about if the checkbox is on another page or component & i want to enable a button on separate component on the selection of checkbox.Also I want to know if there is any count property associated with the checkbox.

Comments are closed.