使用前端框架后js动态改变样式的一些问题（select）

• 问题描述：
  最近在做一个项目，用到一个前端框架，其中一个需求是:在选中“部门”这个下拉菜单（select）之后，要求另外三个“车间”“班组”“工种”下拉菜单（select）变为不可编辑，即这三个下拉菜单的“disabled”属性值置为”disabled”。我是用jQuery来动态实现的，代码如下：

         /*选择部门后其他三个下拉菜单变为不可编辑，部门选回所有类别后其他三个下拉菜单变为可编辑  */
         $("#departmentPid").change(function(){
           var departmentPidValue=$("#departmentPid").val();
           /* 如果部门选择的不是默认值，即选中具体的部门*/
           if(departmentPidValue!="option0"){
            /*将其他三个下拉菜单置为不可编辑状态*/
            $("#WorkshopPid").attr("disabled","disabled");
            $("#TeamPid").attr("disabled","disabled"); 
            $("#WorktypePid").attr("disabled","disabled"); 
             }else{
            /*如果部门选择默认值，将其他三个下拉菜单置为可编辑状态*/
             $("#WorkshopPid").removeAttr("disabled","disabled");
             $("#TeamPid").removeAttr("disabled","disabled");
             $("#WorktypePid").removeAttr("disabled","disabled");
           }

           });

• 问题进阶分析
  可是运行之后，这个动态效果没有成功。我开始以为是代码写错了，可是经过多方考证，我的代码完全正确。后来进过一个前端的大神分析之后，得出一个结论：是前端框架在捣鬼。
  后来他给我加了一几行代码，就可以实现了，代码如下：

         /*选择部门后其他三个下拉菜单变为不可编辑，部门选回所有类别后其他三个下拉菜单变为可编辑  */
         $("#departmentPid").change(function(){
           var departmentPidValue=$("#departmentPid").val();

           if(departmentPidValue!="option0"){

            $("#WorkshopPid").attr("disabled","disabled"); 
            /*下面这两行是加的代码*/
            $('#WorkshopPid').trigger('changed.selected.amui');
            $('#WorkshopPid').next('div').children('button').addClass('am-disabled');

            $("#TeamPid").attr("disabled","disabled"); 
            /*下面这两行是加的代码*/
            $('#TeamPid').trigger('changed.selected.amui');
            $('#TeamPid').next('div').children('button').addClass('am-disabled');

            $("#WorktypePid").attr("disabled","disabled"); 
            /*下面这两行是加的代码*/
            $('#WorktypePid').trigger('changed.selected.amui');
            $('#WorktypePid').next('div').children('button').addClass('am-disabled');
             }else{
             $("#WorkshopPid").removeAttr("disabled","disabled");
             /*下面这一行是加的代码*/
             $('#WorkshopPid').next('div').children('button').removeClass('am-disabled');

             $("#TeamPid").removeAttr("disabled","disabled");
             /*下面这一行是加的代码*/
             $('#TeamPid').next('div').children('button').removeClass('am-disabled');

             $("#WorktypePid").removeAttr("disabled","disabled");
             /*下面这一行是加的代码*/
             $('#WorktypePid').next('div').children('button').removeClass('am-disabled');
           }

           });

• 解决方法
  可以看这个前端框架的开发文档，其中有各个组件的js操作方法。
  通过查看文档将上面的问题的解决方案就简化成一行代码：

 /* 以下三行是没有读文档前自己的做法，很不规范*/
 $("#WorkshopPid").attr("disabled","disabled"); 
 $('#WorkshopPid').trigger('changed.selected.amui');
 $('#WorkshopPid').next('div').children('button').addClass('am-disabled');
 /*这个是看完文档得到的解决方案*/      
 $("#WorkshopPid").selected('disable'); 

• 总结（可以忽略，之前不知道看文档时写的总结）
  为什么会出现这样的情况?
  大神给的解释是：前端框架的样式把你的动态样式给覆盖了，需要取消掉。
  （前端的水很深，有关问题会持续跟踪，继续深入研究）