jQuery - 禁用基于另一个字段选择值的输入字段 [英] jQuery - disable input field based on another field selected value
本文介绍了jQuery - 禁用基于另一个字段选择值的输入字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
例如：
< label>< input type =checkboxdepends_on =foo = 5name =boo... />检查< / label>
< select name =foo...>
< option value =5selected =selected> 5< / option>
< option value =15> 15< / option>
< option value =25> 25< / option>
< / select>
所以只有在下面选择了5选项时才会启用复选框。
或
< select name =foodepends_on =boo。 ..>
< option value =5selected =selected> 5< / option>
< option value =15> 15< / option>
< option value =25> 25< / option>
< / select>
< label>< input type =checkboxname =boo... />检查< / label>
在这种情况下，select应该只在勾选boo时才能启用。
我设法创建了一个类似这样的代码：
$（ *（depends_on））。each（function（）{
var source = $（this）;
var dep = $（this）.attr（'depends_on'）;
var target = dep.split（=）;
$（* [name ='+ target [0] +']：not（：hidden））。change （function（）{
if（$（this）.attr（'checked'））{
source.removeClass（'disabled'）;
source.removeAttr（'disabled'）;
}
else {
source.attr（'disabled'，'disabled'）;
source.addClass（'disabled'）;
}
}）。change（）;
}）;
似乎对依赖无线电的选择起作用，但是我希望对任何类型的输入或组合（或至少大部分），而不必为每种输入类型编写单独的代码。无论如何，任何人都知道这样的插件吗？
或者可能对我的代码有建议？ ：）
解决方案
在这里，您可以： - ）
http://jsfiddle.net/balupton/cxcmf/
（function（$）{
/ **
* jQuery.fn.dependsOn
* @version 1.0.1
* @date 2010年9月22日
* @since 1.0.0，2010年9月19日
* @package jquery-sparkle {@link http：// www.balupton / projects / jquery-sparkle}
* @author BenjaminbaluptonLupton {@link http://www.balupton.com}
* @copyright（c）2010 Benjamin Arthur Lupton { @link http://www.balupton.com}
* @license Attribution-ShareAlike 2.5通用{@link http://creativecommons.org/licenses/by-sa/2.5/
* /
$ .fn.dependsOn =函数（源，值）{
var $ target = $（this），
$ source = $（source），
source = $ source。 attr（'name'）|| $ source.attr（'id'）;
//添加数据
var dependsOnStatus = $ target.data（'dependsOnStatus'）|| {};
dependsOnStatus [source] = false;
$ target.data（'dependsOnStatus'，dependsOnStatus）;
$ b $ //添加事件
$ source.change（function（）{
var pass = false;
var $ source = $（this）; // so $ source不会是无线电的组
//确定
if（（value === null）||（typeof value ==='undefined'））{
//我们没有值
如果（$ source.is（'：checkbox，：radio'））{
pass = $ source.is（'：selected：enabled，：
}
else {
pass = Boolean（$ source.val（））;
}
}
else {
//如果（$ source.is（'：checkbox，：radio'））{
pass = $ source.is（'：selected：enabled，：checked ：'&&（$ source.val（）== value）;
}
else {
pass = $ source .val（）== value;
}
}
//更新
var dependsOnStatus = $ target.data（'dependsOnStatus'）|| {};
dependsOnStatus [source] = pass;
$ target.data（'dependsOnStatus'，dependsOnStatus）;
//确定
var passAll = true;
$ .each（dependsOnStatus，function（i，v）{
if（！v）{
passAll = false;
return false; // break
}
}）;
// console.log（dependsOnStatus）;
//调整
if（！passAll）{
$ target.attr（'disabled'，'disabled'）。addClass（'disabled'）;
}
else {
$ target.removeAttr（'disabled'）。removeClass（'disabled'）;
}
}）。trigger（'change'）;
//连锁
返回这个;
};
}）（jQuery）;
举个例子：
Javascript：
$（function（）{
$（'＃foo'）。dependsOn （'#boo'）。dependsOn（'＃moo'，'test'）
.dependsOn（：radio [name = doo]，'true'）;
}）;
HTML：
< DIV>
< select name =fooid =foo>
< option value =5selected =selected> 5< / option>
< option value =15> 15< / option>
< option value =25> 25< / option>
< / select>
< input type =textname =mooid =moo/>
< input type =checkboxname =booid =boo/>
< input type =radioname =doovalue =false/>
< input type =radioname =doovalue =true/>
< br />
在文本框中输入test并选中复选框以启用选择。
< br />
By< a href =http://www.balupton.comtarget =_ blank> BenjaminbaluptonLupton< / a>，用于< a href =http：// stackoverflow .com / q / 3731586/130638target =_ blank> a StackOverflow Question< / a>
< / div>
I'm searching for a jQuery plugin that does this.
for example:
<label><input type="checkbox" depends_on="foo=5" name="boo" ... /> Check </label>
<select name="foo" ... >
<option value="5" selected="selected">5</option>
<option value="15">15</option>
<option value="25">25</option>
</select>
so the checkbox would only be enabled if the "5" option is selected below.
or
<select name="foo" depends_on="boo" ... >
<option value="5" selected="selected">5</option>
<option value="15">15</option>
<option value="25">25</option>
</select>
<label><input type="checkbox" name="boo" ... /> Check </label>
In this case the select should only enabled if "boo" is checked.
I managed to come up with a code that does something like this:
$("*[depends_on]").each(function(){
var source = $(this);
var dep = $(this).attr('depends_on');
var target = dep.split("=");
$("*[name='"+target[0]+"']:not(:hidden)").change(function(){
if($(this).attr('checked')) {
source.removeClass('disabled');
source.removeAttr('disabled');
}
else{
source.attr('disabled', 'disabled');
source.addClass('disabled');
}
}).change();
});
seems to work ok for selects that depend on radios, but I want to implement this for any type of input or combination (or at least most of them), without having to write separate code for each type of input.
anyway, is anyone aware of such a plugin? or maybe have suggestions to my code above? :)
解决方案
Here you go :-)
http://jsfiddle.net/balupton/cxcmf/
(function($){
/**
* jQuery.fn.dependsOn
* @version 1.0.1
* @date September 22, 2010
* @since 1.0.0, September 19, 2010
* @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
* @copyright (c) 2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
* @license Attribution-ShareAlike 2.5 Generic {@link http://creativecommons.org/licenses/by-sa/2.5/
*/
$.fn.dependsOn = function(source,value){
var $target = $(this),
$source = $(source),
source = $source.attr('name')||$source.attr('id');
// Add Data
var dependsOnStatus = $target.data('dependsOnStatus')||{};
dependsOnStatus[source] = false;
$target.data('dependsOnStatus',dependsOnStatus);
// Add Event
$source.change(function(){
var pass = false;
var $source = $(this); // so $source won't be a group for radios
// Determine
if ( (value === null) || (typeof value === 'undefined') ) {
// We don't have a value
if ( $source.is(':checkbox,:radio') ) {
pass = $source.is(':selected:enabled,:checked:enabled');
}
else {
pass = Boolean($source.val());
}
}
else {
// We do have a value
if ( $source.is(':checkbox,:radio') ) {
pass = $source.is(':selected:enabled,:checked:enabled') && ($source.val() == value);
}
else {
pass = $source.val() == value;
}
}
// Update
var dependsOnStatus = $target.data('dependsOnStatus')||{};
dependsOnStatus[source] = pass;
$target.data('dependsOnStatus',dependsOnStatus);
// Determine
var passAll = true;
$.each(dependsOnStatus, function(i,v){
if ( !v ) {
passAll = false;
return false; // break
}
});
// console.log(dependsOnStatus);
// Adjust
if ( !passAll ) {
$target.attr('disabled','disabled').addClass('disabled');
}
else {
$target.removeAttr('disabled').removeClass('disabled');
}
}).trigger('change');
// Chain
return this;
};
})(jQuery);
For an example:
Javascript:
$(function(){
$('#foo').dependsOn('#boo').dependsOn('#moo','test')
.dependsOn(":radio[name=doo]",'true');
});
HTML:
<div>
<select name="foo" id="foo" >
<option value="5" selected="selected">5</option>
<option value="15">15</option>
<option value="25">25</option>
</select>
<input type="text" name="moo" id="moo" />
<input type="checkbox" name="boo" id="boo" />
<input type="radio" name="doo" value="false" />
<input type="radio" name="doo" value="true" />
<br/>
Type test in the textbox and check the checkbox to enable the select.
<br/>
By <a href="http://www.balupton.com" target="_blank">Benjamin "balupton" Lupton</a>, for <a href="http://stackoverflow.com/q/3731586/130638" target="_blank">a StackOverflow Question</a>
</div>
这篇关于jQuery - 禁用基于另一个字段选择值的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
