温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-04-26 11:14:13 来源:亿速云 阅读:382 作者:iii 栏目:大数据

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

先看效果图:

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

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

html:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.2/lib/index.js"></script>
<div id="app">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
 <el-form-item label="审批人">
  <el-input v-bind:disabled="disabledInput" v-model="formInline.user" placeholder="审批人"></el-input>
 </el-form-item>
 <el-form-item label="活动区域">
  <el-select v-model="formInline.region" @change="inputToDisabled" placeholder="活动区域">
   <el-option label="区域一" value="shanghai"></el-option>
   <el-option label="区域二" value="beijing"></el-option>
  </el-select>
 </el-form-item><el-form-item>
  <el-button type="primary" @click="onSubmit">查询</el-button>
 </el-form-item>
</el-form>
</div>

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:

<!DOCTYPE html>

<html>

 

<head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">

    function inputToDisabled() {

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

    }

  </script>

</head>

 

<body>

  <div class="">

    <input type="text" class="disabled_input" id="disabledInput">

    <button type="button" name="button" onclick="inputToDisabled()">禁用input</button>

  </div>

</body>

 

</html>

class:

<!DOCTYPE html>

<html> 

<head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">

    function inputToDisabled() {

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

  </script>

</head>

 

<body>

  <div class="">

    <input type="text" class="disabled_input" id="disabledInput">

    <button type="button" name="button" onclick="inputToDisabled()">禁用input</button>

  </div>

</body>

 

</html>

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

id:

<!DOCTYPE html>

<html> 

<head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">

    $(function(){

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

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

     });

    })

  </script>

</head>

<body>

  <div class="">

    <input type="text" class="disabled_input" id="disabledInput">

    <button type="button" name="button" id="disabledInputBtn" onclick="inputToDisabled()">禁用input</button>

  </div>

</body>

</html>

 class:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">

    $(function(){

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

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

     });

    })

  </script>

</head>

<body>

  <div class="">

    <input type="text" class="disabled_input" id="disabledInput">

    <button type="button" name="button" id="disabledInputBtn" onclick="inputToDisabled()">禁用input</button>

  </div>

</body>

</html>

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI