README

一个用于简化处理表单字段依赖关系的 jQuery 插件。

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

示例

安装

使用 npm

npm install --save jquery-depends-on

使用 Bower

bower install --save jquery-depends-on

直接下载

从源代码构建

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

# --> dist/dependsOn.min.js

用法

包含 jQuery (需要 v1.7 或更高版本)

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

包含 dependsOn

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

添加表单组件

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

激活插件

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

限定条件

enabled: (布尔) 如果为 true，则依赖项不得有 "disabled" 属性。
checked: (布尔) 如果为 true，则依赖项不得有 "checked" 属性。仅用于复选框。
values: (数组) 依赖值必须等于提供的值之一。
not: (数组) 依赖值不得等于提供的任何值。
match: (正则表达式) 依赖值必须匹配正则表达式。
notMatch: (正则表达式) 依赖值不得匹配正则表达式。
contains: (数组) 提供的值之一必须包含在依赖值数组中。用于具有 "multiple" 属性的 select 字段。
email: (布尔) 如果为 true，依赖值必须匹配电子邮件地址。
url: (布尔) 如果为 true，依赖值必须匹配 URL。
range: (数组) 依赖值必须在给定的范围内。
Custom: (函数) 返回 true 或 false 的自定义函数。

选项

disable: (布尔) 将 "disabled" 属性添加到主题的表单字段。默认: true
readonly: (布尔) 将 "readonly" 属性添加到主题的表单字段。默认: false
hide: (布尔) 在禁用时隐藏主题，在启用时显示主题。默认: true
duration: (数字) 淡入淡出过渡的时间（以毫秒为单位）。仅在将 hide 设置为 true 时使用。默认: 200
trigger: (字符串) 用于检查依赖关系的事件。默认: 'change'
onEnable: (函数) 当主题被启用时执行的回调函数。默认: 空函数
onDisable: (函数) 当主题被禁用时执行的回调函数。默认: 空函数
valueOnEnable: (字符串) 启用时设置主题的值。
valueOnDisable: (字符串) 禁用时设置主题的值。
checkOnEnable: (布尔) 如果为 true，在启用主题时将添加 "checked" 属性。如果为 false，在启用主题时将移除 "checked" 属性。仅用于复选框和单选按钮。
checkOnDisable: (布尔) 如果为 true，在禁用主题时将添加 "checked" 属性。如果为 false，在禁用主题时将移除 "checked" 属性。仅用于复选框和单选按钮。
valueTarget: (字符串) jQuery 选择器，用于目标对象以编辑值。如果想要更改除主题以外的其他内容的值，请使用。
toggleClass: (String) 当启用时，要附加到主题上的类。当主题被禁用时，该类将被移除。

回调函数

当调用 onEnable 和 onDisable 回调函数时，this 被设置为最后触发的依赖项，该函数接收两个参数

e: 触发事件对象
$subject: 主题的 jQuery 对象

其他库

rails_depends_on - dependsOn 的 Rails Gem

ownede / jquery-depends-on

维护者

详情