资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vue2.0结合Element怎么实现select动态控制input禁用

这篇文章主要为大家展示了“vue2.0结合Element怎么实现select动态控制input禁用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue2.0结合Element怎么实现select动态控制input禁用”这篇文章吧。

创新互联公司服务项目包括安阳县网站建设、安阳县网站制作、安阳县网页制作以及安阳县网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,安阳县网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到安阳县省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

vue2.0结合Element怎么实现select动态控制input禁用        

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

html:





 
  
 
 
  
   
   
  
 
  查询
 

js:

var Main = {
  data() {
   return {
    formInline: {
     user: '',
     region: ''
    },
    disabledInput:false
   }
  },
  methods: {
   onSubmit() {
    console.log('submit!');
   },
   inputToDisabled(){
     this.disabledInput=true;
   }
  }
 }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

css:

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

大家要是想看运行的代码可以移步至:Element官网中的Form 表单环境大家可以在哪里将代码运行起来看下效果到底是怎样的嘻嘻。

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

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

id:





 



  

  

  

  

    function inputToDisabled() {

     document.getElementById("disabledInput").disabled = true;

    }

  



 



  

    

    禁用input

  
 

class:



 



  

  

  

  

    function inputToDisabled() {

     document.getElementsByClassName("disabled_input")[0].disabled = true;

  



 



  

    

    禁用input

  
 

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

id:



 



  

  

  

  

    $(function(){

     $("#disabledInputBtn").click(function(){

      $("#disabledInput").attr("disabled", true);

     });

    })

  





  

    

    禁用input

  



 class:







  

  

  

  

    $(function(){

     $("#disabledInputBtn").click(function(){

      $(".disabled_input").attr("disabled", true);

     });

    })

  





  

    

    禁用input

  



以上是“vue2.0结合Element怎么实现select动态控制input禁用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:vue2.0结合Element怎么实现select动态控制input禁用
路径分享:http://cdkjz.cn/article/gcjppj.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220