[easyUI]中 textbox的disabled属性和disable方法

本文探讨了在EasyUI框架中使用Textbox组件时遇到的问题,即通过设置disabled属性与使用disable和enable方法来切换控件状态的区别。前者会导致控件完全重绘,后者则仅修改属性,对显示效果影响较小。

今天在写textbox的hide和show切换时,发现设置textbox  $("#xxx").textbox({disabled:true})时,元素只有边框没有宽度了,琢磨了好久,发现$("#xxx").textbox({disabled:true})会重绘控件,后来改成$("#xxx").textbox('enable')就好了。如下:

在easyUI中操作textbox进行disable和enable状态切换时有两种方法:

方法一、使用disabled属性进行操作,$("#xxx").textbox({disabled:true})/$("#xxx").textbox({disabled:false})

方法二、使用disable和enable方法进行操作,$("#xxx").textbox('disable')/$("#xxx").textbox('enable')


以上两种方法均能实现disable和enable状态切换,但是方法一会完全重绘控件,而方法二只是属性修改,个人开发过程中的一点总结,使用的是easyUI 1.4.1,如有不对之处欢迎指点。
 

<td colspan="3"> <input id='changezero' type="checkbox" name="yfm0fs" value="3GF4BE5H" checked/>不抹零     <input id='changezero1' type="checkbox" name="yfm0fs" value="3GF4BE5I" />小于 <input id="input4" type="number" class="easyui-textbox" style="width:50px;height:20px;" disabled="disabled"> 抹零     <input id='changezero2' type="checkbox" name="yfm0fs" value="3GF4BE5J" />大于 <input id="input5" type="number" class="easyui-textbox" style="width:50px;height:20px;" disabled="disabled"> 抹至 <span id='moneyZero'></span> <span style='color:red;font-size:12px;margin-left:20px'>(抹零金额值不能为负值,也不能大于100)</span> </td>$('#changezero').on('change', function() { $('#input4').textbox('setValue',''); // 禁用输入框 $('#input5').textbox('setValue',''); // 禁用输入框 $('#input4').textbox('reset').textbox('disable'); // 禁用输入框 $('#input5').textbox('reset').textbox('disable'); // 禁用输入框 }); $('#changezero1').on('change', function() { $('#input5').textbox('setValue',''); // 禁用输入框 $('#input5').textbox('reset').textbox('disable'); // 禁用输入框 $('#input4').textbox({ disabled: false, required: true, onChange:function(val){ var reg = /^\d+$/; // 匹配非负整数 if (!reg.test(val) || parseInt(val) > 100) { $('#input4').textbox('setValue', ''); return; } } }); }); $('#changezero2').on('change', function() { $('#input4').textbox('setValue',''); // 禁用输入框 $('#input4').textbox('reset').textbox('disable'); // 禁用输入框 $('#input5').textbox({ disabled: false, required: true, onChange:function(val){ var reg = /^\d+$/; // 匹配非负整数 if (!reg.test(val) || parseInt(val) > 100) { $('#input5').textbox('setValue', ''); $('#moneyZero').text('') return; }else{ $('#moneyZero').text(val) } } }); });修改该方法,支持多选,但是如果选了不抹零其他两个就不能选了,选了其他两个其中的一个,第一个就不允许选了,选择后面的两个的时候,对应的输入框为必填
最新发布
09-26
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ougexingfuba

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值