两个输入框如果一个填写内容另一个输入框就禁用

原创 已于 2022-07-22 17:16:18 修改 · 849 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript #es6 #java
于 2022-03-04 17:42:13 首次发布
这篇博客介绍了如何在Vue中利用v-model指令实现两个输入框的双向绑定，并通过disabled属性动态控制输入框的禁用状态。示例代码展示了当ID存在时禁用Sku输入框，反之亦然，提供了一种在前端表单验证中的实用技巧。

在这里插入图片描述
如果想出现上图效果
可以跟我这样做

<el-input v-model="ID"  :disabled="!!Sku" />
<el-input v-model="Sku" :disabled="!!ID" />

使用disabled属性来做判断

duidandan
关注
使用jQuery禁用输入框
2301_79325657的博客
09-28 478
在本文中，我将向您展示如何使用jQuery来禁用输入框，并提供相应的源代码示例。您可以从官方网站（https://jquery.com/）下载jQuery库，并将其包含在您的HTML文件中，或者使用CDN链接。当您运行上述代码后，选定的输入框将被禁用，用户将无法编辑其内容或触发相应的事件。如果您希望禁用多个输入框，可以使用逗号分隔它们的选择器。请注意，上述代码示例中的选择器可以根据您的实际情况进行修改。接下来，我们将使用jQuery选择器来选取要禁用的输入框，并使用。或其他属性来选择要禁用的输入框。
jquery 当一个input框不为空时，控制另外一个输入框不可用
water_Popcorn的博客
05-22 2158
Html源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/j...
elementUI的el-table中加入el-form并实现enter到下一个输入框
九段刀客的博客
09-08 3711
实现效果 代码 <template> <div> <el-button @click="add">新增</el-button> <el-button @click="save">保存</el-button> <el-form id="table-form" ref="form" :rules...
在一个JS方法里，如何实现先执行一个函数再执行另一个函数
z2000ky的博客
05-23 9417
在 JavaScript 中，你可以使用不同的方法来确保一个方法在另一个方法之前执行。你可以在一个方法中定义一个回调函数，然后在另一个方法中调用这个回调函数，以确保它们的执行顺序。你可以使用事件监听来确保一个方法在另一个方法之后执行，尤其在涉及异步操作或事件驱动的情况下。根据情况选择合适的方法来确保方法的执行顺序。如果你的方法是异步的，你可以使用 async/await 来确保它们按顺序执行。使用 Promise 可以更灵活地处理异步操作，并确保它们按照预期的顺序执行。
编写程序，如下所示。有两个文本框，第一个文本框可以输入数据，第二个文本框不可编辑。要求在第一个文本框输入数据后，如果单击“复制”按钮（或在文本框中按下回车键），则可把第一个文本框中输入的数据复制到第二
weixin_45634936的博客
04-29 6090
编写程序，如下所示。有两个文本框，第一个文本框可以输入数据，第二个文本框不可编辑。要求在第一个文本框输入数据后，如果单击“复制”按钮（或在文本框中按下回车键），则可把第一个文本框中输入的数据复制到第二个文本框中；如果单击“清空”按钮，则两个文本框中的数据全部清空。 仅供学习 package day01; import javax.swing.*; import java.awt.event.Ac...
vue+el-input 循环出现联动、不可输入
happysmartgirl的博客
02-21 1192
【代码】vue+el-input 循环出现联动、不可输入。
禁用input输入框
weixin_44540670的博客
06-08 1659
做项目时发现有一些地方，比如input输 入框里的内容是禁止用户修改的，禁止用户修 改input输入框有很多方法，禁用input输入 框就是其中的一种，而禁用输入框又有多种方 法，下面我为大家列举两种方法。 第一种disabled属性， 浏览器会将中所有的表 单控制项（、 、 元素) 视为禁用，以防止键盘鼠标与它们发生 交互；添加 disabled 布尔值属性到input上， 就能防止用户操...
禁用输入框input
weixin_44546509的博客
04-17 2886
开发工具与关键技术：Visual Studio 2015 作者：Mr_恺 撰写时间：2019.04.12 如果你想要禁用一个输入框input，只需要简单添加disableo属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式 在Asp.Net Mvc中,新增或修改时，大多算都是通过页面获取值，然后通过ajaxSubmit方法提交表单到控制器中进行数据的新增保存...
elementui禁用输入框同时禁用校验
weixin_55553106的博客
05-27 2889
需求是 当上面的单选框选中了某一项时输入框禁用 但是发现当禁用了之后 提交表单是还是会触发校验 所以给出两个方案 首先简单的就是 如果项目允许的情况下 当条件为禁用时直接v-if隐藏该输入框 此时校验不会触发 第二就是需求必须是禁用而不是隐藏 思路是动态改变输入框的prop值 举例 <el-form-item label=“举例单选框” prop=‘radio’> <el-radio-group v-model=“tableData.radio">
html选择按键点击后锁死输入框_关于javascript中一个页面锁死问题（左右选中小程序）...
weixin_39637711的博客
12-19 355
左右选中input[type='button'] {width: 50px;}//获取左右两个select 框的对象//向右边的第一个按钮的功能function toRight2() {var selectLeftObj = document.getElementById("left");var selectRightObj = document.getElementById("right");v...
ElementUI BUG笔记——el-input
canvas_hua的博客
08-28 809
问题：for下使用el-input，发现最后一个输入不了。 解决办法：使用原生input替代，并在原生input上套上el-input的class。 希望帮到其他小伙伴~
隐藏输入框
zhanqizi的专栏
07-23 1105
function showChecked(value){//隐藏输入框 if(value==1){//如果value 是1就隐藏第2个 document.getElementById("i1").style.display = ""; document.getElementById("i2").style.display = "none"; }else if(value==2)
vue .input赋值之后input框无法输入，或者和其他input框错位，校验延迟
weixin_42575505的博客
01-10 2137
如果在 Vue 中使用 v-model 指令给 input 框赋值之后，input 框无法输入或者和其他 input 框错位，有可能是因为 v-model 指令在给 input 框赋值之前导致了错误。 这种情况常常发生在在父组件和子组件之间传递数据时，由于数据在父组件和子组件之间的渲染延迟导致的。 要解决这个问题，可以使用 v-model.lazy 指令，或者在赋值时使用 $nextTick 方法...
点击一个input输入框另一个input选中，点击不选择时另一个清空,输入框做年龄限制
qq_39181017的博客
01-04 1286
  &lt;input class="agetype" name="agetype" style="margin-left: 10px;margin-bottom:5px" type="checkbox" value="0" &gt;年龄&gt;&lt;/input&gt; &lt;input id="agenum" name
js控制输入框禁止输入和允许输入
weixin_41377877的博客
06-07 8947
初始，部分输入框禁止输入：$(document).ready(function(){ $("#fundCode").prop("disabled",true); $("#convertFundCode").prop("disabled",true); $("#allowtradeVol").prop("disabled",true); $("#appVol").
el-input输入框输入不进去值
weixin_44740072的博客
02-21 1781
el-input输入框输不进去值，在其他输入框操作会造成输入框乱码情况 原因：双向绑定没有给定初始值 解决办法：data中定义输入框双向绑定默认值，默认空值/undefined都行
实现两个输入框互动，一个输入框写文字自动出现在第二个输入框里面
weixin_43601303的博客
02-21 988
属性，这是为了防止用户在第二个输入框中输入，这是可选的视你的需要而定，如果不需要可以移除该属性。上例中的第二个输入框不会影响第一个输入框的值，因为我们没有给它设置事件监听器。事件)，每当第一个输入框的值发生变化时，就会将这个值同步到第二个输入框中。第二个输入框不需要添加这样的监听器，因此它的输入不会影响第一个输入框。）的内容发生变化时，事件监听器就会把它的值传递到第二个输入框（我们可以为第一个输入框添加一个事件监听器来监听输入 (比如。你可能注意到第二个输入框有一个。在这段代码中，当第一个输入框（
Vue框架下，表单存在多个复选框时，如何选中一个同时禁用其它复选框
热门推荐
mia1106的博客
03-15 1万+
如标题所示，我们怎样实现下面的需求呢？当我们选中其中一个选项时，其它的选项应该被禁用，因为我们只想提交一组数据。怎样使用 Vue.js 来实现呢?首先我们看，如果是一个checkbox，&lt;input type="checkbox" :disable="true"&gt;,这样就可以将其禁用。所以当有多个input 存在时，我们需要的是理清逻辑关系，让disable在何时的情况发挥作用。禁用：...
HTML input 输入限制
strong90的博客
10-11 4620
1.只能输入数字和英文的： &lt;input onkeyup="value=value.replace(/[/W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))" ID="Text1" NAME="Text1"&gt; 2.只能输入数字...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值