easyui模板中的disabled的使用

本文探讨了EasyUI框架中disabled属性的使用限制及其解决办法。介绍了两种绕过disabled属性限制的方法:一是通过隐藏元素来实现传值;二是在表单提交前动态修改disabled属性为false,从而达到传值的目的。

easyui模板中的disabled的属性为不可选择,且不可以传值,需要传值有两种方法,一种在disabled 的下面再写一行设置为隐藏,就可以传值了
另一种方法收在提交前将disabled设置为false,也可以传值了

<!DOCTYPE html> <meta charset="UTF-8"> <!-- 订单管理-订单建线配置修改 --> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'center'" style="padding: 5px;"> <form method="post" action="IDLCVDAFJ1" data-for="update" class="vscform"> <input id="3HPXIID3" type="hidden" name="rowid" value="" /> <fieldset style="margin-top: 5px; border-style: hidden;"> <table style="width: 100%;"> <tr> <th width="17.0%">订单编号:</th> <td width="30.0%"> <span id="3HPXIID4"> </span> </td> <th width="17.0%">计费方式:</th> <td width="30.0%"> <span id="43X324Y8"> </span> </td> </tr> <tr> <th width="20.0%">价格计算公式:</th> <td width="30.0%"> <input id="4N8URO2I" class="easyui-combobox" name="jggs" data-options="required:true,editable:false,method:'get',excons:'enumops=3Y73TV98',loader:vscbloader,groupField:'group',height:'26px'" style="width: 100%; height: 26px;" /> </td> <th width="17.0%">运费税率:</th> <td width="33.0%"> <input id="3ITTSRM6" class="easyui-numberbox" name="slv" data-options="prompt:'点击这里输入税率',required:true,validType:['length[0,15]'],precision:2,height:'26px'" style="width:90%;height:26px;"/> % </td> </tr> <tr> <th width="20.0%">运费单价:</th> <td colspan="3"> 货主☞   <span id='bdshowid'> 结算净重:<input id="3UB0M4P7" class="easyui-combobox" name="hzjsfs" data-options="required:true,editable:false,method:'get',excons:'enumops=40KNP5AV',loader:vscbloader,groupField:'group',height:'26px',multiple:false" style="width: 100px; height: 26px;" /> </span> 单价:<input id="3IPP5F5V" class="easyui-numberbox" name="zbjg" data-options="prompt:'元',required:true,validType:['length[0,16]'],precision:2,height:'26px'" style="width: 70px; height: 26px;" />        司机☞   <span id='bdshowid1'> 结算净重:<input id="3UYRI4PH" class="easyui-combobox" name="sjjsfs" data-options="required:true,editable:false,method:'get',excons:'enumops=40KNP5AV',loader:vscbloader,groupField:'group',height:'26px',multiple:false" style="width: 100px; height: 26px;" /> </span> 单价:<input id="3HPXIID5" class="easyui-numberbox" name="jfdj" data-options="prompt:'元',required:true,validType:['length[0,16]'],precision:2,height:'26px'" style="width: 70px; height: 26px;" /> </td> </tr> <tr> <th width="17.0%">中标金额:</th> <td width="33.0%"> <input id="3NCW7K5V" class="easyui-numberbox" name="amount" data-options="prompt:'点击这里输入中标金额',required:true,validType:['length[0,16]'],precision:2,height:'26px'" style="width:100%;height:26px;"/> </td> <th width="17.0%">货物单价:</th> <td width="33.0%"> <input id="3HPXIID7" class="easyui-numberbox" name="hwdj" data-options="prompt:'点击这里输入货物单价【普货建线】',required:true,validType:['length[0,16]'],precision:2,height:'26px'" style="width: 100%; height: 26px;" /> </td> </tr> <tr> <th width="17.0%">货主货损扣费百分比:</th> <td width="33.0%"> 扣费方式:<input id="3UY0I5P9" class="easyui-combobox" name="hzhskffs" data-options="required:true,editable:false,method:'get',excons:'enumops=3YCOUNNJ',loader:vscbloader,groupField:'group',height:'26px',multiple:false" style="width: 40%; height: 26px;" /> <input id="3HPXIID8" class="easyui-numberbox" name="hzbl" data-options="prompt:'点击这里输入货损扣费百分比',required:true,validType:['length[0,15]'],precision:2,height:'26px'" style="width: 30%; height: 26px;" /> </td> <th width="17.0%">司机货损扣费百分比:</th> <td width="33.0%"> 扣费方式:<input id="3UY0I4P7" class="easyui-combobox" name="hskffs" data-options="required:true,editable:false,method:'get',excons:'enumops=3YCOUNNJ',loader:vscbloader,groupField:'group',height:'26px',multiple:false" style="width: 40%; height: 26px;" /> <input id="3HPXIID9" class="easyui-numberbox" name="bl" data-options="prompt:'点击这里输入货损扣费百分比',required:true,validType:['length[0,15]'],precision:2,height:'26px'" style="width: 30%; height: 26px;" /> </td> </tr> <tr> <th width="20.0%">服务费(人力资源平台):</th> <td colspan="3"> <input id="3MT0RN3N" class="easyui-numberbox" name="charge" data-options="prompt:'点击这里输入服务费',required:false,validType:['length[0,16]'],precision:2,height:'26px'" style="width: 70%; height: 26px;" /> % </td> </tr> <tr> <th width="20.0%">运费抹零方式:</th> <td colspan="3"> <input id='changezero' type="radio" name="yfm0fs" value="3GF4BE5H" checked/>不抹零     <input id='changezero1' type="radio" name="yfm0fs" value="3GF4BE5I" />小于 <input id="input4" type="number" class="easyui-textbox" style="width:50px;height:20px;" disabled="disabled"> 抹零     <input id='changezero2' type="radio" 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> </tr> </table> </fieldset> </form> </div> <div data-options="region:'south'" style="height: 32px;text-align: right;vertical-align: middle;padding: 3px;overflow: hidden;"> <a class="easyui-linkbutton save-btn" data-options="plain:true,iconCls:'icow-Apply'">提交</a> <a class="easyui-linkbutton canc-btn" data-options="plain:true,iconCls:'icon-cancel'">取消</a> </div> </div> <script type="text/javascript"> $(function(){ var fmodes = {"jffs":"combobox","amount":"numberbox","slv":"numberbox","zbjg":"numberbox","bl":"","ddbh":"textbox","hwamount":"numberbox","id":"textbox","yfamount":"numberbox"}; var fields = {"jffs":"43X324Y8","amount":"3NCW7K5V","slv":"3ITTSRM6","zbjg":"3IPP5F5V","bl":"3HPXIID8","ddbh":"3HPXIID4","hwamount":"3HPXIID7","id":"3HPXIID3","yfamount":"3HPXIID5"}; var handle = (function(){ })(); var data=vsparams(); var rows = data; var ddlx; var rowids = ''; if(data.length == undefined){ ddlx = data.ddlx; }else{ ddlx = data[0].ddlx; data = data[0]; var ddbhs=rows[0].ddbh; if(rows.length>1)ddbhs+="等"+rows.length+"单"; $("#3HPXIID4").text(ddbhs) $.each(rows,function (i,r){ rowids+=r.id+','; }) $("#3HPXIID3").val(rowids.substring(0,rowids.length-1)); } //抹零配置 $('#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', ''); } } }); }); $("#input5").textbox({ onChange:function(val){ $('#moneyZero').text(val) } }) if(data.yfm0fs.includes('不抹零')){ }else if(data.yfm0fs.includes('小于')){ }else if(data.yfm0fs.includes('大于')){ } if(rows.length != undefined){ if(data.ysjsid ==null && data.yfjsid ==null){ $("#4N8URO2I").combobox({disabled: true}); $('#3UY0I5P9').combobox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3ITTSRM6").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3HPXIID9").numberbox({disabled: true}); $("#3NCW7K5V").combobox({disabled: true}); $('#3HPXIID8').numberbox({disabled: true}); $('#3MT0RN3N').combobox({disabled: true}); }else if(ddlx == '39I3MPX4' && data.ysjsid == null){// $("#4N8URO2I").combobox({disabled: true}); $('#3UY0I5P9').combobox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3ITTSRM6").numberbox({disabled: true}); $("#3UYRI4PH").combobox({disabled: true}); $("#3HPXIID5").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3HPXIID9").numberbox({disabled: true}); $("#3NCW7K5V").combobox({disabled: true}); $('#3UY0I5P9').combobox({disabled: true}); $('#3HPXIID8').numberbox({disabled: true}); $('#3MT0RN3N').combobox({disabled: true}); }else if((ddlx == '39I3MPX4' && data.yfjsid == null) || (ddlx == '39I3MPX5' && data.ysjsid == null)){ $("#3UB0M4P7").combobox({disabled: true}); $("#3IPP5F5V").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I5P9").combobox({disabled: true}); $("#3HPXIID8").numberbox({disabled: true}); $("#4N8URO2I").combobox({disabled: true}); $("#3ITTSRM6").numberbox({disabled: true}); $("#3NCW7K5V").combobox({disabled: true}); $('#3MT0RN3N').numberbox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3HPXIID9").numberbox({disabled: true}); } }else{ if(data.ysjsid ==null && data.yfjsid ==null){ }else if(data.ddlx == '39I3MPX4' && data.ysjsid == null){ $("#4N8URO2I").combobox({disabled: true}); $("#3ITTSRM6").numberbox({disabled: true}); $("#3UYRI4PH").combobox({disabled: true}); $("#3HPXIID5").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3HPXIID9").numberbox({disabled: true}); }else if((data.ddlx == '39I3MPX4' && data.yfjsid == null) || (data.ddlx == '39I3MPX5' && data.ysjsid == null)){ $("#3UB0M4P7").combobox({disabled: true}); $("#3IPP5F5V").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I5P9").combobox({disabled: true}); $("#3HPXIID8").numberbox({disabled: true}); } } vsdelay(function(cxt){ var form = cxt.find('form'); try{ var page = vscontext(form, cxt); page.init(fmodes, fields, handle); }catch(e){ console.log(e); } cxt.find('.save-btn').on('click', function(){ if(form.form('validate')){ var param=form.serializeArray(); if(rows.length == undefined){ param.push({name:"qyid",value:data.ysqyid}); param.push({name:"lx",value:"YF"}); param.push({name:"jxxglx",value:"3HPTKK6R"}); if(data.zdid && typeof(data.zdid)!= "undefined")param.push({name:"zdid",value:data.zdid}); param.push({name:"jggs_q",value:data.jggs}); param.push({name:"slv_q",value:data.slv}); param.push({name:"hzjsfs_q",value:data.hzjsfs});// param.push({name:"zbjg_q",value:data.zbjg});// param.push({name:"sjjsfs_q",value:data.sjjsfs});// param.push({name:"jfdj_q",value:data.jfdj});// param.push({name:"amount_q",value:data.amount}); param.push({name:"hwdj_q",value:data.hwdj}); param.push({name:"hzhskffs_q",value:data.hzhskffs}); param.push({name:"hzbl_q",value:data.hzbl}); param.push({name:"hskffs_q",value:data.hskffs}); param.push({name:"bl_q",value:data.bl}); }else{ param.push({name:"qyid",value:data.ysqyid}); param.push({name:"lx",value:"YF"}); param.push({name:"jxxglx",value:"3HPTKK6R"}); param.push({name:"ddlx",value:ddlx}); param.push({name:"hzjsfs_q",value:data.hzjsfs});// param.push({name:"zbjg_q",value:data.zbjg});// param.push({name:"sjjsfs_q",value:data.sjjsfs});// param.push({name:"jfdj_q",value:data.jfdj});// } vsportal('PhjxAction.jxjexg',param, function(response){ if(response.status == true){ vsalert('系统提示:','订单配置修改成功!', 'info', function(){ vsclose(true); }); }else{ vsalert('温馨提示:', response.message, 'error'); } }); } }); cxt.find('.canc-btn').on('click', function(){ vsclose(false); }); }); }); </script>代码优化,将data里面拿到的yfm0fs的值‘小于52抹零’默认赋值到页面上
09-23
function initAfterSales(){ var afterSales_Json = [#if afterSales_Json!=null]${afterSales_Json}[#else][][/#if]; console.log("afterSales_Json:" + JSON.stringify(afterSales_Json)); var afterSalesCols = [[ { title: '${message("售后类型")}', field: 'after_sale_type', width: 150, align: 'center', formatter: function (val, item, rowIndex) { var html = '<select name="contractAfterSaleTerms[' + rowIndex + '].afterSaleType" class="text afterSaleType" onchange="editRate(this)">' + '<option value="" >请选择</option>' + '<option value="0" ' + (val == "0" ? "selected" : "") + '>质保</option>' + '<option value="1" ' + (val == "1" ? "selected" : "") + '>开机调试</option>' + '<option value="2" ' + (val == "2" ? "selected" : "") + '>巡检</option>' + '<option value="3" ' + (val == "3" ? "selected" : "") + '>保养</option>' + '</select>'; return html; } }, { title: '${message("基准类型")}', field: 'after_sale_calculate_type', width: 150, align: 'center', formatter: function (val, item, rowIndex) { var html = ' <select name="contractAfterSaleTerms[' + rowIndex + '].afterSaleCalculateType" class="text afterSaleCalculateType" onChange="editRate(this)"> ' ; html +='<option value="">请选择</option>' + '<option value="0" '+ (val == "0" ? "selected" : "") + '>实际出库日期</option>' + '<option value="1"' + (val == "1" ? "selected" : "") + '>初验日期</option>' + '<option value="2"' + (val == "2" ? "selected" : "") + '>终验日期</option>' + "</select>"; return html; } }, { title: '${message("频率")}', field: 'after_sale_interval', align: 'center', width: 150, formatter: function (val, item, rowIndex) { var flag1; var flag2; var flag3; var flag4; if (val == '0'){ flag1 = 'selected'; }else if (val == '1'){ flag2 = 'selected'; }else if (val == '2'){ flag3 = 'selected'; }else if (val == '3'){ flag4 = 'selected'; } var html = '<select name="contractAfterSaleTerms[' + rowIndex + '].afterSaleInterval" class="text afterSaleInterval " onchange="editRate(this)">' + '<option value="">请选择</option>' + '<option value="0" '+flag1+'>月</option>' + '<option value="1" '+flag2+'>季度</option>' + '<option value="2" '+flag3+'>半年度</option>' + '<option value="3" '+flag4+'>年度</option>' + "</select>"; return html; } }, { title: '${message("次数")}', field: 'times', width: 150, align: 'center', formatter: function (val, item, rowIndex) { var html = '<input name="contractAfterSaleTerms[' + rowIndex + '].times" class="text times" min="0" step="1" value = "' + val + '" type="number">'; return html; } }, { title: '备注', align: 'center', field: 'remark', width: 240, formatter: function (val, item, rowIndex) { return '<input name="contractAfterSaleTerms[' + rowIndex + '].remark" class="text remark" value="'+val+'" type="text">'; } }, { title: '${message("操作")}', field: 'xxx', align: 'center', width: 60, formatter: function (val, item,rowIndex) { rowIndex++; return '<a href="javascript:;" class="deleteAfterSalesTerms btn-delete">删除</a>'; } } ]]; var options = { tableName: "tableAfterSalesList",//表名 data: afterSales_Json, columns: afterSalesCols,//列 pagination: false,//是否使用分页 onLoadSuccess: function () { bindDeleteEvent(); } }; //初始化列表 initEasyUiTable('#table-afterSales', options); $("#addAfterSales").click(function () { var rows = $('#table-afterSales').datagrid('getRows'); if (rows.length == 5) { $.message_alert("最多只能添加5行!"); return false; } $('#table-afterSales').datagrid('appendRow', {}); bindDeleteEvent(); }); function bindDeleteEvent() { $('.deleteAfterSalesTerms').off('click').on('click', function () { var index = $(this).closest('tr.datagrid-row').attr('datagrid-row-index'); $('#table-afterSales').datagrid('deleteRow', parseInt(index)); }); } } 请使用纯html和内联 实现当售后类型为质保时移除基准类型的disabled
最新发布
10-31
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值