Basic Usage

1. Include jQuery

   Add jQuery to your header.

   Make sure the path is set to the location where you have jQuery saved.

   <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>

2. Include dependsOn

   Add dependsOn to your header after jQuery.

   Make sure the path is set to the location where you have dependsOn saved.

   <script type="text/javascript" src="dependsOn-1.0.0.min.js"></script>

3. Add form components

   In this example the input field "myText" will be enabled when the checkbox "myCheck" is checked.

   <form id="myForm">
   	<label for="myCheck">Check Me</label>
   	<input type="checkbox" id="myCheck">
   
   	<label for="myText">Input</label>
   	<input type="text" id="myText" value="">
   </form>

4. Activate plugin

   Use jQuery selectors to active the plugin.

   $('#myText').dependsOn({
   	// The selector for the depenency
   	'#myCheck': {
   		// The dependency qualifiers
   		enabled: true,
   		checked: true
   	}
   });

Qualifiers

Options

Examples

1. Checked

   Text field will be enabled and revealed when the checkbox is checked.

   Check me

   Hide HTML

   <form id="basicTest">
   	<label>
   		<input type="checkbox"> Check me
   	</label>
   	
   	<input type="text" class="subject">
   </form>

   Hide Javascript

   $('#basicTest .subject').dependsOn({
   	'#basicTest input[type="checkbox"]': {
   		checked: true
   	}
   });

2. Values

   Submit button will be enabled and revealed when the text field value is either "yes" or "true".

   Do you wish to continue?
   

   Hide HTML

   <form id="valuesTest">
   	<label>Do you wish to continue?</label>
   	<input type="text">
   
   	<input type="submit" class="subject">
   </form>

   Hide Javascript

   $('#valuesTest .subject').dependsOn({
   	'#valuesTest input[type="text"]': {
   		values: ['yes', 'true']
   	}
   });

3. Multiple Dependencies

   Submit button will be enabled and revealed when the checkbox is check and the text field value is an email address.

   Send me emails Email

   Hide HTML

   <form id="emailTest">
   	<label>
   		Send me emails <input type="checkbox">
   	</label>
   
   	<label>
   		Email <input type="text" class="email">
   	</label>
   
   	<input type="submit" class="subject">
   </form>

   Hide Javascript

   $('#emailTest .subject').dependsOn({
   	'#emailTest input[type="checkbox"]': {
   		checked: true
   	},
   	'#emailTest .email': {
   		email: true
   	}
   });

4. Affecting the value

   Change the text field value when the select menu changes.

   Enable? Yes No

   Hide HTML

   <form id="affectValueTest">
   	<label>
   		Enable? <select>
   			<option value="yes">Yes</option>
   			<option value="no">No</option>
   		</select>
   	</label>
   	
   	<input type="text" class="subject">
   </form>

   Hide Javascript

   $('#affectValueTest .subject').dependsOn({
   	'#affectValueTest select': {
   		values: ['yes']
   	}
   }, {
   	valueOnEnable: 'Hello, world!',
   	valueOnDisable: 'Goodbye, cruel world...',
   	hide: false
   });

5. Handling Multiple Values

   Button will be enabled when the proper two animals are selected. (hint: They have four legs)

   I'm thinking of two animals, what are they? Dog Fish Cat Spider
   

   Hide HTML

   <form id="multipleValuesTest">
   	<label>I'm thinking of two animals, what are they?</label>
   	<select multiple>
   		<option value="dog">Dog</option>
   		<option value="fish">Fish</option>
   		<option value="cat">Cat</option>
   		<option value="horse">Spider</option>
   	</select>
   	<br>
   
   	<input type="submit" class="subject">
   </form>

   Hide Javascript

   $('#multipleValuesTest .subject').dependsOn({
   	'#multipleValuesTest select': {
   		values: [['dog', 'cat']]
   	}
   }, {
   	valueOnEnable: 'Correct!',
   	valueOnDisable: 'Incorrect',
   	hide: false
   });

Advanced Usage

1. Multiple Dependencies with the or method.

   $( subject ).dependsOn( dependencySet, [options] ).or( dependencySet );
   Adds an additional dependency set to check against. They can also be chained together for three or more dependency sets.

   Example

   "Add Another" button will be enabled when extra cheese is checked, or an extra topping is selected.

   Would you like to add anything to your pizza? Extra Cheese Extra Topping Select one... Pepperoni Sausage Olives Onion Bell Pepper

   Hide HTML

   <form id="orTest">
   	<label>Would you like to add anything to your pizza?</label>
   	<label>
   		Extra Cheese <input type="checkbox" name="xtraCheese">
   	</label>
   
   	<label>
   		Extra Topping <select class="span2">
   			<option value="select">Select one...</option>
   			<option value="pepperoni">Pepperoni</option>
   			<option value="sasage">Sausage</option>
   			<option value="olives">Olives</option>
   			<option value="onion">Onion</option>
   			<option value="Bell Pepper">Bell Pepper</option>
   		</select>
   	</label>
   	
   	<input type="button" class="subject" value="Add Another">
   	<input type="submit" value="Continue">
   </form>

   Hide Javascript

   $('#orTest .subject').dependsOn({
   	'#orTest input[name="xtraCheese"]': {
   		checked: true
   	}
   }, {
   	hide: false
   }).or({
   	'#orTest select': {
   		not: ['select']
   	}
   });

2. Custom Qualifiers

   You can easily add your own qualifiers for extended functionality. To use a custom qualifier, add your own property to the qualifiers and assign it to function. The function will be passed the value of the dependency and must return a boolean (true|false) value in order to function properly. There is no limit to the amount of custom qualifiers you can have.

   Example

   The text field will be enabled when the checkbox is checked and "Click me" is clicked.

   Check me Click me
   

   Hide HTML

   <form id="customQualifierTest">
   	<label>
   		<input type="checkbox"> Check me
   	</label>
   	
   	<a href="#" class="clickMe">Click me</a>
   	<br>
   
   	<input type="text" class="subject">
   </form>

   Hide Javascript

   var isClicked = false;
   
   var customQualifierTest = $('#customQualifierTest .subject').dependsOn({
   	'#customQualifierTest input[type="checkbox"]': {
   		checked: true,
   		// Custom qualifier returns the value of the global variable `isClicked`.
   		clicked: function( val ) {
   			return isClicked;
   		}
   	}
   }, {
   	hide: false
   });
   
   $('#customQualifierTest .clickMe').toggle(function() {
   	isClicked = true;
   	// Force dependencies to be checked.
   	customQualifierTest.check();
   	return false;
   }, function() {
   	isClicked = false;
   	// Force dependencies to be checked.
   	customQualifierTest.check();
   	return false;
   });

3. Enable and Disable Callbacks

   You can specify callbacks for enable and disable using the onEnable and onDisable options.

   Example

   When the text field is enabled by checking the checkbox, a dialog will appear.

   Check me

   Hide HTML

   <form id="callbackTest">
   	<label>
   		<input type="checkbox"> Check me
   	</label>
   	
   	<input type="text" class="subject">
   </form>

   Hide Javascript

   $('#callbackTest .subject').dependsOn({
   	'#callbackTest input[type="checkbox"]': {
   		checked: true
   	}
   }, {
   	onEnable: function() {
   		window.alert('Hello, world!');
   	}
   });

4. Value Target

   If you wish to change the value of a form field other than the subject you would use the valueTarget option in conjunction with the valueOnEnable and/or valueOnDisable options. This is useful if the subject is not a form field itself.

   Example

   When "Married" or "Widowed" are selected, the salutaion field will be changed to "Mrs.".

   Married? Married Divorced Single Widowed

   Hide HTML

   <form id="valueTargetTest">
   	<label>
   		Married?
   		<select>
   			<option value="married">Married</option>
   			<option value="divorced">Divorced</option>
   			<option value="single">Single</option>
   			<option value="widowed">Widowed</option>
   		</select>
   	</label>
   
   	<div class="subject">
   		<input type="text" class="salutation">
   		<input type="text" cvalue="Doe">
   	</div>
   </form>

   Hide Javascript

   $('#valueTargetTest .subject').dependsOn({
   	'#valueTargetTest select': {
   		values: ['married', 'widowed']
   	}
   }, {
   	valueTarget: '#valueTargetTest .salutation',
   	valueOnEnable: 'Mrs.',
   	valueOnDisable: '',
   	hide: false
   });