网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

vue结合Element如何实现select动态控制input禁用

这篇“vue结合Element如何实现select动态控制input禁用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue结合Element如何实现select动态控制input禁用”文章吧。

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了加查免费建站欢迎大家使用!

先看效果图:

vue结合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);

用JavaScript和jquery怎么实现上面的效果

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

  



以上就是关于“vue结合Element如何实现select动态控制input禁用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


分享文章:vue结合Element如何实现select动态控制input禁用
网页网址:http://bjjierui.cn/article/pdhjec.html

其他资讯