dependsOn
, (*1)
A jQuery plugin to facilitate the handling of form field dependencies., (*2)
$( subject ).dependsOn( dependencySet, [options] );, (*3)
Examples
Demo, (*4)
Installation
with npm
npm install --save jquery-depends-on
with Bower
bower install --save jquery-depends-on
Download directly
Latest Release, (*5)
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), (*6)
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
, (*7)
Include dependsOn, (*8)
<script type="text/javascript" src="dependsOn.min.js"></script>
, (*9)
Add form components, (*10)
Activate plugin, (*11)
$('#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, (*12)
Other Libraries