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 ..
|
[Foreign] Cultural 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);
};