我可以根据另一个控件的状态操作一个控件,如
this jsfiddle所示,其中CheckBox的状态改变了TextBox的宽度和背景颜色.
HTML是：
<input type="checkBox" id="ckbxEmp" >czech Bachs <input type="text" id="txtbxSSNOrITIN">
jQuery是：
$(document).on("change",'[id$=ckbxEmp]',function () {
if ($(this).is(":checked")) {
$('[id$=txtbxSSNOrITIN]').css('background-color','#ffff00');
$('[id$=txtbxSSNOrITIN]').css('width','24');
} else {
$('[id$=txtbxSSNOrITIN]').css('background-color','green');
$('[id$=txtbxSSNOrITIN]').css('width','144');
}
});
但除此之外,我真正需要做的是根据复选框的状态来限制用户输入文本框的字符数.我怎么能这样做,最好是用CSS,但如果有必要的话,jQuery？
解决方法
jsFiddle
首先,设置maxlength,如：< input type =“text”id =“txtbxSSNOrITIN”maxlength =“5”>
$(document).on("change",function () {
var ckd = this.checked; // ckd is now a boolean
$('[id$=txtbxSSNOrITIN]')
.attr("maxlength",ckd? 2 : 5) // 2 characters if checked,else 5
.css({
background: ckd? '#ffff00' : "green",// yellow if checked,else green
width: ckd? 24 : 144 // 24px if checked,else 144
});
});
上面还有一个较小的问题,那就是如果：用户最初输入超过5个字符,如果你点击复选框,值长度仍然是5！因此,您需要一个额外的条带,以删除不需要的字符,如：
$(document).on("change",function () {
var ckd = this.checked;
$('[id$=txtbxSSNOrITIN]').attr("maxlength",ckd? 2 : 5).css({
background: ckd? '#ffff00' : "green",width: ckd? 24 : 144
}).val(function(i,v){
// If checked,slice value to two characters:
return ckd && v.length>2 ? v.slice(0,2) : v;
});
});
如果你想使用你构建的代码去专业,你可能还想要
防止用户感到愚蠢
通过存储最后一个(长一个)类型的值.如果用户单击复选框而不是意识到“那么……那是愚蠢的”,再次勾选它应该返回旧的值：
$(document).on("change",function () {
var ckd = this.checked;
var $input = $('[id$=txtbxSSNOrITIN]');
if(ckd) $input.data("oldValue",$input.val() ); // Remember the current value
$input.prop("maxlength",ckd? 2 : 5).css({
background: ckd? '#ffff00' : "green",v){
// If checked,slice value to two characters:
return ckd && v.length>2 ? v.slice(0,2) : $input.data("oldValue");
});
});
