WPOnion DependsOn

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

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

Examples

Demo

Installation

with npm

npm install --save @wponion/jquery-depends-on

Download directly

Latest Release

Build from source

git clone https://github.com/wponion/dependsOn.git
cd dependsOn
npm install
gulp

# --> dist/wponion-dependsOn.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="wponion-dependsOn.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').WPOnion_dependsOn({
	// The selector for the depenency
	'#myCheck': {
		// The dependency qualifiers
		enabled: true,
		checked: true
	}
});

Qualifiers

Qualifiers	Description	Alias
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/String) Dependency value must equal one of the provided values. if provided value is array. if provided value is string then it must match.	= , == , === , equals , OR , or , ||
not_equals	(String) Dependency value must not match.	!= , !== , !=== , !equals
empty	Dependency value must be empty.	'' , "" , EMPTY
not_empty	Dependency value must not be empty.	!'' , !"" , !empty , !EMPTY
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.	in , IN , has , HAS
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.
gt	(Int) Dependency value must be greater than given value.	>
gte	(Int) Dependency value must be greater than given or equal value.	>=
lt	(Int) Dependency value must be lesser than given value.	<
lte	(Int) Dependency value must be lesser than given or equal value.	<=
Custom	(Function) Custom function which return true or false.

Options

Option Name	Description	Default
disable	(Boolean) Add "disabled" attribute to the subject's form field.	true
readonly	(Boolean) Add "readonly" attribute to the subject's form field.	false
hide	(Boolean) Hide the subject on disable and reveal the subject on enable.	true
duration	(Number) The time in milliseconds for the fade transition. Used only if hide is set to true	200
trigger	(String) The event used to check dependencies.	'change'
onEnable	(Function) The callback function to execute when the subject has been enabled	-
onDisable	(Function) The callback function to execute when the subject has been disabled.	-
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
• depends_on - jQuery for dependsOn

License

This project is licensed under MIT. See the LICENSE file for more info.

Backed By