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

发布时间：2020-12-17 02:58:20 所属栏目：百科来源：网络整理

导读：今天有一个盆友问小颖，怎么实现用select动态控制input禁用，也就是说，input默认是可编辑的，但是每当我选一次select，input就会变成禁用，虽然小颖不知道她为什么这样做，因为小颖觉得为什么不直接把input设置成禁用的而要用动态的，选一次select禁用一次i

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

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

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

html：

function inputToDisabled() {

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

}

<input type="text" class="disabled_input" id="disabledInput"&gt;

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

class:

function inputToDisabled() {

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

<input type="text" class="disabled_input" id="disabledInput"&gt;

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

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

id：

$(function(){

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

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

 });

})

<input type="text" class="disabled_input" id="disabledInput"&gt;

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

class:

$(function(){

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

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

 });

})

<input type="text" class="disabled_input" id="disabledInput"&gt;

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!