ABP ModuleZero後臺框架materialize禁止模擬select和checkbox

使用abp modulezero自帶那個後臺框架發現一個操蛋的問題，全部的select和checkbox都被改爲div模擬的，雖然比原生美觀，但有時候真的很難用。

好比說要用select作一個聯動菜單，或者用js調整select的選中值、checkbox的選中狀態，模擬的那個不能跟隨改變，十分操蛋。

還有一個問題，這套框架默認把全部的checkbox移到一個看不見的地方，而後原地模擬出一個checkbox來，結果這個功能致使其餘插件上的checkbox也消失了，好比UEditor：

上面的是正常效果，下面的是在abp modulezero中使用ueditor的效果，checkbox不見了。

解決方案：

Checkbox

查看後臺框架的樣式表：materialize.css

發現一段

Remove default checkbox的代碼，他把全部的checkbox都移位了，註釋掉這段代碼，而後加了一個form-simulation的樣式表，用來表示是模擬的，之後凡是須要影藏原生的顯示模擬的就在原生checkbox上加上class="form-simulation"。

/* Remove default checkbox */
/*[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}*/
.form-simulation {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

使用方法：

若是要使用模擬checkbox, 每一個checkbox都要有一個label, label的id要和checkbox的id一一對應， 若是class上沒有加 form-simulation 就會顯示一個模擬的和一個原生的，加了就影藏掉原生的只保留模擬的。

 

select

分析發現/js/admin.js裏面有這一段代碼：

$.AdminBSB.select = {
    activate: function () {
        if ($.fn.selectpicker) { $('select:not(.ms)').selectpicker(); }
    }
}

它的意思是沒有包含ms樣式表的select就進行模擬。

select根據本身的需求，若是要使用模擬的，默認全部select都是模擬的，若是想用原生的，就在select的class加上ms這個樣式表， 框架就不會自動模擬了。

 

這個問題也是困擾了我好久，當時一個網站的後臺功能都快作完了發現這個問題，又苦於找不到解決方案，最後只能把整個後臺框架給換成了AdminLTE，換完了以後過了幾天忽然靈關一閃，默認框架確定是遍歷了全部的原生組件進行了隱藏，因此找到代碼應該就能解決，因而仔細分析了代碼果真找到了解決方案，如今貼出來但願能幫助有緣人吧，畢竟如今使用abp框架的人也不算多。