在编辑表单时，需要对某些字段做处理，使其置灰，并且不可编辑，同时禁用掉点击事件。在保存数据时，不能影响数据的获取。
前端采用了layui和semantic ui组件。表单中需要禁用的只有semantic ui组件的下拉框、日期框 和 layui的日期框。
思路：semantic ui支持disabled class添加后，样式以及功能支持禁用和置灰。layui的日期框，显示的部分实际上就是个input输入框。直接使用disabeld属性也能支持。disabled属性有可能导致数据获取不全，所以采用在获取数据前，先取消禁用和置灰，获取完成后，再禁用和置灰，防止数据获取不全问题。
未禁用前效果
禁用后效果
/**
* 禁用部分不能修改字段
*/
function disabledPlan(){
$("#qualityCheckTypeDiv").addClass("disabled");//置灰质控类型
$("#go").attr("disabled",true);//置灰计划开始时间
$("#end").attr("disabled",true);//置灰计划结束时间
$("#planCheckDate").attr("disabled",true);//置灰计划检查日期
$("#apnSelect").addClass("disabled");//置灰班次选择
$("#time_start").parent().addClass("disabled",true);//置灰检查时间范围
$("#c_team").addClass("disabled");//置灰小组
$("#leaderDiv").addClass("disabled");//置灰组长
$("#personsDiv").addClass("disabled");//置灰组员
$("#qualityCheckTypeSearch").hide();//隐藏质控类型配置选择
$("#qualityCheckGroupSearch").hide();//隐藏小组
$("#qualityCheckContentSearch").hide();//隐藏质控类型选择
}
/**
* 启用部分不能修改字段
*/
function enablePlan(){
$("#qualityCheckTypeDiv").removeClass("disabled");//取消置灰质控类型
$("#go").attr("disabled",false);//取消置灰计划开始时间
$("#end").attr("disabled",false);//取消置灰计划结束时间
$("#planCheckDate").attr("disabled",false);//取消置灰计划检查日期
$("#apnSelect").removeClass("disabled");//取消置灰班次选择
$("#time_start").parent().removeClass("disabled");//取消置灰检查时间范围
$("#c_team").removeClass("disabled");//取消置灰小组
$("#leaderDiv").removeClass("disabled");//取消置灰组长
$("#personsDiv").removeClass("disabled");//取消置灰组员
}进入页面初始调用disabledPlan()方法 保证置灰效果。
点击保存时，先调用enablePlan()方法 再组装请求参数。设置完成后，再调用disabledPlan()方法。
发表评论