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框架的人也不算多。