EasyUI datebox 設置不可編輯后再次修改為可編輯失效的解決

工作中遇到的問題,折騰了好久:

   如下圖:

     

 需求:當狀態發生改變后,如果狀態是未核實 ,  核實人 核實時間 核實結果 核實說明  均為不可編輯狀態

具體js代碼如下:

    //狀態改變
    $('#jsStatus').combobox({   
       onSelect: function(r){
          if("dhs"==r.value){
              $('#jsPersonNo').val("");
              $('#jsPersonNo').attr("disabled",true);
              $('#jsVerifyDate').datebox("setValue","");
              $('#jsVerifyDate').datebox({disabled:true});
             $('#jsResult').combobox("setValue","");
             $('#jsResult').combobox({disabled:true});
            $('#jsVerifyRemark').val("");
            $('#jsVerifyRemark').prop('readonly',true);
           }
         if("yhs"==r.value){
            $('#jsPersonNo').attr("disabled",false);
            $("#jsVerifyDate").datebox({disabled:false});
            $('#jsResult').combobox({disabled:false});
            $('#jsVerifyRemark').prop('readonly',false);
          }
       }
    });

但是發現出現了如下問題:   當狀態改變為 已審核(yhs)  時,  databox 日期的 disabled 屬性修改為false,可編輯失效(具體原因尚不明確),代碼為上面紅色部分  頁面效果如下圖:

 

 發現核實時間依然為不可編輯......

經過嘗試,發現移除disabled屬性可以解決問題,於是將JS中紅色部分代碼修改如下:

  $('#jsVerifyDate').removeAttr("disabled");

修改之后功能問題是解決了,但是外觀問題又來了,看下圖:

日期控件是出來了,也可編輯,但是文本框還是灰色,而且日期控件的圖標也沒了,沒辦法,只有想辦法繼續改.........

百度了很多資料,沒有找到相關的解決方案........,最后只有自己試了

分析頁面發現,在修改為不可編輯狀態時,EasyUI給改元素增加了一些屬性,如下圖(紅色框框住的部分為easyUI添加的 class):

  對EasyUI 添加的class進行一下說明:

        Wdate:  用於控制顯示日期圖標的樣式 class

        disabled:  控制文本框為不可編輯時的樣式class ,如果為不可編輯,easyUI會添加此樣式將文本框會變為灰色

 

現在,我只要將控制文本框為灰色的這個樣式移除就好了:

在JS里添加如下代碼:

$('#jsVerifyDate').removeClass("disabled");     //移除disabled的樣式

 

最后完整的JS代碼如下(紅色是與以前代碼不同的部分):

//狀態改變
    $('#jsStatus').combobox({   
      onSelect : function(r){
       if("dhs"==r.value){
           $('#jsPersonNo').val("");
           $('#jsPersonNo').attr("disabled",true);
           $('#jsVerifyDate').datebox("setValue","");
           $('#jsVerifyDate').datebox({disabled:true});
           $('#jsResult').combobox("setValue","");
           $('#jsResult').combobox({disabled:true});
           $('#jsVerifyRemark').val("");
           $('#jsVerifyRemark').prop('readonly',true);
           }
       if("yhs"==r.value){
           $('#jsPersonNo').attr("disabled",false);
           $('#jsVerifyDate').removeAttr("disabled");   
           $('#jsVerifyDate').removeClass("disabled");
           $('#jsResult').combobox({disabled:false});
           $('#jsVerifyRemark').prop('readonly',false);
          }
       }
    });

 

至於  $("#jsVerifyDate").datebox({disabled:false}); 失效,個人認為是因為easyUI 設置 datebox  disabled:true  屬性的時候添加了部分樣式,但是取消 disabled的時候這些樣式又沒有被刪除,所以出現這樣的狀況

 另外這里推薦使用 onSelect 事件,之前使用onChange事件出現了問題,頁面加載初始值無法顯示,改成onSelect就好了.