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

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

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

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

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

html：

<script src="/UploadFiles/2021-04-02/vue.js">

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：


<!DOCTYPE html>

<html>

 

<head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

class:


<!DOCTYPE html>

<html> 

<head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

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


<!DOCTYPE html>

<html> 

<head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

 class:


<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：WebSocket实现简单客服聊天系统

            下一篇：详解微信小程序 相对定位和绝对定位

        
    
    一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
    
    
        友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap
    
    
        
            
                主页
                破解
                音乐
                影视