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
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: truereadonly
: (Boolean) Add "readonly" attribute to the subject's form field. Default: falsehide
: (Boolean) Hide the subject on disable and reveal the subject on enable. Default: trueduration
: (Number) The time in milliseconds for the fade transition. Used only ifhide
is set to true. Default: 200trigger
: (String) The event used to check dependencies. Default: 'change'onEnable
: (Function) The callback function to execute when the subject has been enabled. Default: Empty FunctiononDisable
: (Function) The callback function to execute when the subject has been disabled. Default: Empty FunctionvalueOnEnable
: (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.
Other Libraries
- rails_depends_on - Rails Gem for dependsOn