ControlledCheckbox

A checkbox whose state may be controlled by other checkboxes using JavaScript. The checkbox rendered by this component may be automatically selected or deselected by a ControlCheckbox within the same group.

See also: CheckboxGroup , ControlCheckbox

Parameters

Name Type Required Default Description
value boolean yes Value editted by the component; read on render, updated on form submit. This sets the check attribute of the rendered element.
disabled boolean no false If true, then the checkbox will render as disabled and any input from the checkbox will be ignored.
group CheckboxGroup no If provided, it specifies the CheckboxGroup this component belongs to. If it is not specified, then the component is a a part of the CheckboxGroup that wraps it. Please note that if this parameter is used, then the CheckboxGroup it refers to must either enclose the current component, or must be defined after it.

Body: removed / allowed

Informal parameters: allowed / forbidden

Reserved parameters: none

Examples

Template

	
<form jwcid="form">
    <span jwcid="checkboxGroup">
    	<input jwcid="controlCheckbox"/>	
    		<input jwcid="controlledCheckbox1"/>
    		<input jwcid="controlledCheckbox2"/>
    		<input jwcid="controlledCheckbox3"/>                        
    </span>    
    ...
</form>    
	

Specification

<property name="state1" persist="session" initial-value="false"/>
<property name="state2" persist="session" initial-value="false"/>
<property name="state3" persist="session" initial-value="false"/>        
	
   <component id="checkboxGroup" type="contrib:CheckboxGroup"/>    
   <component id="controlCheckbox" type="contrib:ControlCheckbox"/>
   
<component id="controlledCheckbox1" type="contrib:ControlledCheckbox">
	<binding name="value" value="state1"/>
</component>   
<component id="controlledCheckbox2" type="contrib:ControlledCheckbox">
	<binding name="value" value="state2"/>
</component> 
<component id="controlledCheckbox3" type="contrib:ControlledCheckbox">
	<binding name="value" value="state3"/>
</component>