Flex Examples
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:
<?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:
<?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):
<?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.
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.
Share
I personally enjoy #2 and is my #1 decision for situations like this although I do like the approach of #3.
You could always combine #2 and #3. Even if the Button control has its
enabledproperty set tofalse, 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
Exactly.
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
Sorry, it didn’t show my script i used while posting.
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?
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 && check2b.selected && 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
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
sweet web site dude!
#2 combined with #3 worked PERFECT!!! Thank you!
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.
Nice blog …I loved It…