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

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

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

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

html：

rush:xhtml;">

<script type="text/javascript">

function inputTo<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled() {

 document.getElementById("<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledInput").<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled = true;

}

<div class="">

<input type="text" class="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled_input" id="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledInput"&gt;

<button type="button" name="button" onclick="inputTo<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled()"&gt;禁用input</button>