dependsOn

A jQuery plugin to facilitate the handling of form field dependencies.

$( subject ).dependsOn( dependencySet, [options] );

Examples

Installation

with npm

npm install --save jquery-depends-on

with Bower

bower install --save jquery-depends-on

Download directly

Latest Release

Build from source

git clone https://github.com/dstreet/dependsOn.git cd dependsOn npm install gulp  # --> dist/dependsOn.min.js

Usage

Include jQuery (requires v1.7 or higher)

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

Include dependsOn

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

Add form components

<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>

Activate plugin

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

Qualifiers

enabled: (Boolean) If true, then dependency must not have the "disabled" attribute.
checked: (Boolean) If true, then dependency must not have the "checked" attribute. Used for checkboxes only.
values: (Array) Dependency value must equal one of the provided values.
not: (Array) Dependency value must not equal any of the provided values.
match: (RegEx) Dependency value must match the regular expression.
notMatch: (RegEx) Dependency value must not match the regular expression.
contains: (Array) One of the provided values must be contained in an array of dependency values. Used for select fields with the "multiple" attribute.
email: (Boolean) If true, dependency value must match an email address.
url: (Boolean) If true, Dependency value must match an URL.
range: (Array) Dependency value must be within the given range.
Custom: (Function) Custom function which return true or false.

Options

disable: (Boolean) Add "disabled" attribute to the subject's form field. Default: true
readonly: (Boolean) Add "readonly" attribute to the subject's form field. Default: false
hide: (Boolean) Hide the subject on disable and reveal the subject on enable. Default: true
duration: (Number) The time in milliseconds for the fade transition. Used only if hide is set to true. Default: 200
trigger: (String) The event used to check dependencies. Default: 'change'
onEnable: (Function) The callback function to execute when the subject has been enabled. Default: Empty Function
onDisable: (Function) The callback function to execute when the subject has been disabled. Default: Empty Function
valueOnEnable: (String) The value to set the subject to when enabled.
valueOnDisable: (String) The value to set the subject to when disabled.
checkOnEnable: (Boolean) If true, "checked" attribute will be added to subject when enabled. If false, "checked" attribute will be removed from subject when enabled. For checkboxes and radio buttons.
checkOnDisable: (Boolean) If true, "checked" attribute will be added to subject when disabled. If false, "checked" attribute will be removed from subject when disabled. For checkboxes and radio buttons.
valueTarget: (String) jQuery selector for the object to you want to target for editing the value. Use if you want to alter the value of something other than the subject.
toggleClass: (String) The class you wish to be appended to the subject when enabled. The class will be removed when the subject is disabled.

Callbacks

When the onEnable and onDisable callbacks are called, this is set to the last triggered dependency, and the function is passed two arguments:

e: The triggering event object
$subject: The jQuery object of the subject

Other Libraries

rails_depends_on - Rails Gem for dependsOn

dependsOn : jQuery plugin for handling Form field Dependencies