解决方法:默认不为文本域添加disabled和readonly等属性,在其获取焦点时添加相应属性,失去焦点时再移除。这样就不影响jquery validation的校验了。
之所以默认不添加,是因为如果用户不进行点击操作,jQuery validation还是不进行校验的。
如下:
<div class="form-group">
<label><span class="red">*</span>家庭月综合收入(自动计算)</label>
<input type="number" class="form-control" name="incomefamily" readonly_="readonly" autocomplete="off" placeholder="">
</div>
注意,我这里默认为文本域添加了自定义的readonly_属性(注意后面有下划线),这样方便使用jQuery选择器批量选择。
然后为其添加事件:
$("input").each(function(){
if($(this).attr("readonly_")=="readonly"){
$(this).on("focusin", function() {
$(this).prop('readonly', true);
});
$(this).on("focusout", function() {
$(this).prop('readonly', false);
});
};
});
$("textarea").each(function(){
if($(this).attr("readonly_")=="readonly"){
$(this).on("focusin", function() {
$(this).prop('readonly', true);
});
$(this).on("focusout", function() {
$(this).prop('readonly', false);
});
};
});