layer.open 弹出层中打开的表单页面如何禁用部分输入框

layer.open({
    type: 2,//Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
    title: '养护决策-编辑',
    maxmin: true, //开启最大化最小化按钮
    area: ['800px', '624px'],//编辑框尺寸
    fixed: false, //不固定
    content: 'edit?decisionId=' + data.decisionId,
    success:function (layero,index){
      let disfield=['a0110','a0103','a0203','mileage','maintainArea','budget']  //数组中的字符串是layui的name值  也就是要禁用的输入框和select多选框
      disabledInput(disfield,index)
},
});
 1 function disabledInput(fieldName,index){//  (['',''],index)
 2    //用于禁用layer.open打开的页面中的input  寄托于弹出层成功函数success index是打开页面的弹出层索引 disfiled是要禁用的Input以及select-tree的name名字 必须是个数组
 3    let body=layer.getChildFrame('body',index); //获取到layer.oepn打开的子页面结构 4  for(let i=0;i<fieldName.length;i++){ //利用find查找 找到数组中我们需要禁用的元素 
 5   if(body.find("input[name="+fieldName[i]+"]").hasClass('xm-select-default')){//判断是输入框还是select选择框 如果是slect选择框 那么我们需要把它替换为input输入框 因为select选择框 无法禁用
 6       body.find("div[id="+fieldName[i]+"]").replaceWith('<input type="text" name='+fieldName[i]+' readonly class="input-readonly layui-input">');
 7   }else{
 8      body.find("[name="+fieldName[i]+"]").addClass('input-readonly').attr('readonly',true);//设置禁用属性 这里用readonly或者disabled都可以  添加类名 input-readonly  设置样式 border:none,backgorund:#efefef
 9   }
10  }
11 }
posted @ 2021-09-15 14:55  火知火味  阅读(722)  评论(0编辑  收藏  举报