A jQuery plugin to facilitate the handling of form field dependencies.
$( subject ).dependsOn( dependencySet, [options] );
npm install --save jquery-depends-on
bower install --save jquery-depends-on
git clone https://github.com/dstreet/dependsOn.git
cd dependsOn
npm install
gulp
# --> dist/dependsOn.min.js
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
}
});
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.
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.
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
- rails_depends_on - Rails Gem for dependsOn