1. 程式人生 > 其它 >layer.open 彈出層中開啟的表單頁面如何禁用部分輸入框

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 }
獲取到layer.open開啟的子頁面結構
一名小白正在敢往bug現場 歡迎大家持續騷擾 QQ:1784841965