jQuery - 禁用基于另一个字段选择值的输入字段
我正在寻找一个这样做的jQuery插件。jQuery - 禁用基于另一个字段选择值的输入字段
例如:
<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>
这样的复选框将仅如果“5”选项被选择以下启用。
或
<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>
在这种情况下,如果“嘘”检查选择只启用。
我设法拿出,做这样的事情代码:
$("*[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 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);
举一个例子:
的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://*.com/q/3731586/130638" target="_blank">a * Question</a>
</div>
我想出这个代码:
$("input[target]").change(function(){
var target = $("[name='"+$(this).attr("target")+"']");
if($(this).is(":checked")){
target.attr("oldvalue",target.val()).val($(this).val());
}else{
target.val(target.attr("oldvalue"));
}
});
$("select").change(function(){
$("[target='"+ $(this).attr("name") +"'][value='"+ $(this).val() +"']").attr('checked', true);
});
以及用于在HTML格式:
<label><input type="checkbox" target="foo" value="15"/> Check </label>
<select name="foo">
<option value="5" selected="selected">5</option>
<option value="15">15</option>
<option value="25">25</option>
</select>
所以基本上,所有你需要做的就是有一个“目标”属性应该与您要绑定的下拉列表的“name”属性匹配。同样设置输入的值,当它被选中时,它应该选择相应的下拉列表的值。
感谢XAR,但分配基于另一个输入状态的值是不是真的我想要什么。 – Alex 2010-09-18 17:19:06
jQuery disable button (NOT Submit) until field validates + Validation Plugin
jQuery enable/disable show/hide button w/ SELECT options. Get remaining option values
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
谢谢,但上面的链接都没有真正回答我的问题。 – Alex 2010-09-20 20:13:46
谢谢。你做了一个了不起的工作!唯一的问题是input.dependsOn(radio = value)似乎不起作用 – Alex 2010-09-20 20:12:20
将查看它:) – balupton 2010-09-20 21:16:51
修正:http:// jsfiddle。net/264Yd/7/ – balupton 2010-09-21 18:11:25