Urlaub in Lichtenau-Husen
TomSoft - handmade Software

ButtonGroup Live Demo Page

This Demo-Page should give you an idea about the ButtonGroup plug-in:

The RadioGroup on the right hand side (Cultural Origin) will be enabled / disabled based on the left-hand side (Nationality) selection. Clicking the button shows the current value of both Groups in the Textboxes.
The Relations-Checkbox-Group is completley enaabled or disabled by it's first button labeled "No Relatives/unknown"
Clicking "Spouse" enables the selection of "German Spouse", while it disables the "Partner in life" checbbox ..


Nationality
[Foreign] Cultural Origin
Relations
 
Results
Nationality:
Cult.Origin:

 

Sample Source Code:

        // define Namepaces
        $Form = { controls: {}, data: {} };
        $Controls = $Form.controls;

        $(document).ready(function() {
            $Form.onInit();
            $Form.WriteForm();
        });

        $Form.onInit = function() {
            $Controls.radioGroupStaat = $("#fsNationality").ButtonGroup().click(onStaat);
            $Controls.CultGroup = $("#fsKultur").ButtonGroup();
            $Controls.cult_txtYearImmigrated = $("#txtZZJahr").val("0");
            $Controls.cult_txtYearAquired = $("#txtStakJahr").val("0");

            $Controls.relGroup = $("#tb_checkbrd").ButtonGroup();
            $Controls.relGroup.disable().uncheck().get("rel_no").enable().checked(true);
            $Controls.rel_no = $Controls.relGroup.get("rel_no").click(_onNorelatives);
            $Controls.rel_partner = $Controls.relGroup.get("rel_partner").click(_onPartner);
            $Controls.rel_spouse = $Controls.relGroup.get("rel_spouse").click(_onSpouse);
            $Controls.rel_spousedt = $Controls.relGroup.get("rel_spousedt");

            $Controls.txtNat = $("#txtNat");
            $Controls.txtCult = $("#txtCult");

            // Set Initial State
            onStaat();
            return this;
            
            //
            // Eventhandler for the Nationality-RadioGroup
            //
            function onStaat(event) {
                var val = $Controls.radioGroupStaat.val();

                switch (val) {
                    case 1:
                        $Controls.CultGroup.disable(1, 4, 5);
                        $Controls.cult_txtYearImmigrated.disable().val("0");
                        $Controls.cult_txtYearAquired.disable().val("0");
                        break;

                    case 2:
                        $Controls.CultGroup.disable(0, 3, 5);
                        $Controls.cult_txtYearImmigrated.enable().val("1990");
                        $Controls.cult_txtYearAquired.enable().val("1997");
                        break;

                    case 3:
                        $Controls.CultGroup.disable(0, 1, 3, 4);
                        $Controls.cult_txtYearImmigrated.enable().val("2003");
                        $Controls.cult_txtYearAquired.disable().val("0");
                        break;
                };
                return true;
            };

            //
            // Eventhandler for the "rel_no" Checkbox
            //
            function _onNorelatives(evt) {
                if ($Controls.rel_no.checked())
                    $Controls.relGroup.disable().uncheck().get("rel_no").enable().checked(true);
                else {
                    $Controls.relGroup.enable();
                    _onSpouse();
                };
            };


            //
            // Eventhandler for the "rel_spouse" Checkbox
            //
            function _onSpouse() {
                var bEnable = $Controls.rel_spouse.checked();

                $Controls.rel_partner.enable(!bEnable)
                $Controls.rel_spousedt.enable(bEnable);
                if (!bEnable) {
                    $Controls.rel_spousedt.checked(false);
                    $Controls.rel_spouse.checked(false);
                };
                return true;
            };

            //
            // Eventhandler for the "rel_partner" Checkbox
            //
            function _onPartner() {
                $Controls.rel_spouse.enable(!this.checked)
                return true;
            };

        };


        ///
        /// WriteForm
        ///
        $Form.WriteForm = function() {
              $Controls.radioGroupStaat.val("1");
              $Controls.CultGroup.val("5");
        };

        $Form.ReadForm = function() {
            $Controls.txtNat.val($Controls.radioGroupStaat.val());
            $Controls.txtCult.val($Controls.CultGroup.val());
            return false;
        };
        

        $.fn.enable = function(bEnable) {
            /// <summary>
            /// jQuery plugin to enable/disable Controls
            /// </summary>    
            ///    <returns type="JQuery">JQuery Wrapper</returns>
            bEnable = (typeof (bEnable) == 'boolean') ? bEnable : true;
            return this.each(function() {
                $("label[for='" + this.id + "']").css("color", bEnable ? "" : "#aab")
                $(this).css("color", bEnable ? "" : "#aab");
                this.disabled = bEnable;
            })
        };

        $.fn.disable = function() {
            /// <summary>
            /// jQuery plugin to enable/disable Controls
            /// </summary>    
            ///    <returns type="JQuery">JQuery Wrapper</returns>
            return this.enable(false);
        };