今天有一个盆友问小颖，怎么实现用select动态控制input禁用，也就是说，input默认是可编辑的，但是每当我选一次select，input就会变成禁用，虽然小颖不知道她为什么这样做，因为小颖觉得为什么不直接把input设置成禁用的而要用动态的，选一次select禁用一次input，也就是说，input只有在select是没有点击过的时候是可编辑的，但凡我改变一次select的值，input就要被设置成禁用，其实没有必要，因为第一次设置成禁用后面已经不能再改变input的值了，不过当时小颖也不会，折腾了半天，最终在刚刚解决了那个问题。

     我们先一起来看看效果图：

        

     小颖就不配置环境了，小颖当时在试的时候是用Element官网中的Form 表单环境试验的大家一起来看代码吧：

html：

1  2  3 
     
       4 
      
        5   
       
         6     
         7   
        8   
       
         9     
        
         10       
         11       
         12     
        13   
       
       
        14     
        
         查询
        15   
       16 
      17 
     

js：

1 var Main = { 2     data() { 3       return { 4         formInline: { 5           user: '', 6           region: '' 7         }, 8         disabledInput:false 9       }10     },11     methods: {12       onSubmit() {13         console.log('submit!');14       },15       inputToDisabled(){16           this.disabledInput=true;17       }18     }19   }20 var Ctor = Vue.extend(Main)21 new Ctor().$mount('#app')

css：

@import url("//unpkg.com/element-ui@1.3.2/lib/theme-default/index.css");

大家要是想看运行的代码可以移步至：大家可以在哪里将代码运行起来看下效果到底是怎样的嘻嘻。

下面小颖在给大家分享下用JavaScript和jquery怎么实现上面的效果，小颖就简单的给大家做个demo就不写漂亮的样式了嘻嘻。好吧其实我是懒得不想写哈哈哈

               

1.JavaScript实现动态将input设成disabled，可以用id、class实现。

id：

    
                     
     
        
              
      禁用input    
     

 class:

    
                     
     
        
              
      禁用input    
     

2.jquery实现动态将input设成disabled，可以用id、class实现。

id：

    
                     
     
        
              
      禁用input    
     

  class:

    
                     
     
        
              
      禁用input