微信小程序点击按钮动态切换input的disabled禁用/启用状态功能

2024-07-31 12:47:45

做微信小程序项目的时候遇到一个功能，个人信息资料的修改与保存。以下是说明及简化后的代码：

1.页面加载完成时，所有input处于禁用状态；

2.点击编辑按钮时，文字切换成“保存”，身份证input保持始终不可修改状态（即禁用），姓名input可以修改（即动态加载切换禁用/启用）；

3.再次点击按钮文字切回“编辑”，所有input变为禁用状态。

以下是wxml部分

<view class="btn">
 <button bindtap="changeInfo">{{text}}</button> //绑定按钮的点击事件
 </view>
 <view>姓名：
 <input class="uName" type="text" disabled='{{isDisabled}}'/>
 </view>
 <view>身份证号：
 <input class="uIdentity" type="idcard" disabled='true'/>
 </view>

上段代码中，姓名为动态加载状态，所以disabled写成disabled='{{isDisabled}}' 而身份证input为始终不可修改的状态，所以disabled写死为disabled=‘true'

以下是js部分

Page({
 data: {
 isDisabled:true, //表示页面加载完成时disabled为启用状态
 text:"编辑" //表示按钮初始文字为编辑
 },
 changeInfo(e) { //点击事件发生时
 //一定要写成this.data.isDisabled，不然判断出不来
 if (!this.data.isDisabled) { //当disabled=false时
 this.setData({
 isDisabled: true, //修改isDisabled的值为true（即启用状态）
 text: "编辑" //文字修改为“编辑”
 })
 }
 else { //当disabled=true时
 this.setData({
 isDisabled: false, //修改isDisabled的值为false（即禁用状态）
 text: "保存" //文字修改为“保存”
 })
 }
 }

将用户信息数据动态加载到input框中，此过程中身份证始终保持不可修改的状态，姓名可根据按钮动态切换成编辑和保存的状态。

下面给大家补充点知识解决“微信小程序disabled属性不生效”的问题！

微信小程序中带disabled属性的表单组件有（点击可以进入官方文档）：

button，checkbox，input，picker，radio，slider，switch，textarea

如果是固定禁用组件的话，直接放上disabled就好，简单粗暴，如：

1. 忽略值的情况：

<button disabled>测试</button>

2. 使用值的情况：

<!-- 正确 -->
<button disabled="{{true}}">测试</button>
<button disabled="{{false}}">测试</button>

<!-- 错误 -->
<button disabled="true">测试</button>
<button disabled="false">测试</button>

在以上的错误写法中，disabled="true"是有效的，但disabled="false"是无效的，接下来，我先解释一下：

注意一下官方文档中，disabled的值是布尔值（Boolean），而以上的字符串（String），赋值“false”就是true。

所以disabled="false"其实就是disabled=true，它的非禁用就无效了。

如果disabled的值是动态的灵活的话，如：

在index.js中，设置一个data数据变量

Page({
 data: {
 isDisabled: true
 }
})

在index.wxml中，用上表单组件

<input type="text" disabled="{{isDisabled}}" />

<button disabled="{{isDisabled}}">测试</button>

修改disabled的值

this.setData({
 isDisabled: false
})

总结

到此这篇关于微信小程序点击按钮动态切换input的disabled禁用/启用状态功能的文章就介绍到这了,更多相关微信小程序切换input内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序 input输入框详解及简单实例

微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,
微信小程序input框中加入小图标的实现方法

最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性. 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是in
微信小程序实现简单input正则表达式验证功能示例

本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e
微信小程序使用input组件实现密码框功能【附源码下载】

本文实例讲述了微信小程序使用input组件实现密码框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view style="width:80%; display:flex;"> <view>用户名:</view> <input style="border: 1px solid;border-color: lightblue;width:60%;" placeholder="
微信小程序 input输入框控件详解及实例（多种示例）

微信小程序 input输入框控件今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下:  <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能

做微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存.以下是说明及简化后的代码: 1.页面加载完成时,所有input处于禁用状态: 2.点击编辑按钮时,文字切换成"保存",身份证input保持始终不可修改状态(即禁用), 姓名input可以修改(即动态加载切换禁用/启用): 3.再次点击按钮文字切回"编辑",所有input变为禁用状态. 以下是wxml部分 <view class="btn"> <button bindt
微信小程序点击view动态添加样式过程解析

这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下基本逻辑: 1.给每个view自定义dataIndex属性,从0开始 2.自定义一个名为selected的class,作为被选中后的样式 3.在wx.js中给viewId属性赋为0,用于默认显示. 4.给每个view添加一个点击事件select,在点击某个view时将dataIndex变成这个view的自定义index 5.在view中
微信小程序点击顶部导航栏切换样式代码实例

这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类似这样的效果 <view class='helpCateList'>  <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key=&qu
微信小程序点击切换样式scroll-view实现代码实例

这篇文章主要介绍了微信小程序点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="
微信小程序外卖选购页实现切换分类与数量加减功能案例

本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能.分享给大家供大家参考,具体如下: 关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤: 效果图实现以下功能一. 点击分类项,切换右边的食品,并高亮自身这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可. categoryStates = categoryStates.map(function (item, i) { if (index == i) { i
微信小程序点击生成朋友圈分享图(遇到的坑)

上个月boss交给我个微信小程序的活,告诉我只需要负责前端页面这块,问我多久做完,于是我不知天高地厚的说一礼拜就能完工,哈哈哈,果然,现实总是那么无情的来打脸了...磨磨蹭蹭一共用了将近3个礼拜才算完事. 今天就来总结下遇到的各种坑好了~~~ 由于做的是仿照包你说的小程序,这里就借用包你说的截图好啦 (这个做出来是模拟器跟真机上都会显示生成的图片的,鬼知道是为啥..) 唔,不废话了,直接上代码好啦 A:wxml(一定要加上image标签,如果你没有加的话,那么即使图片生成了,在页面上也是不会显
微信小程序点击控件后选中其它反选实例详解

微信小程序点击控件后选中其它反选实例详解前言: 如果需要实现进来进行给按钮加上买一送一的样式,或者单击就选中单个按钮,只能靠css结合js进行控制了,小程序暂时没有这样的控件. 实现效果图: 微信小程序进来的时候自动进行按钮样式的初始化,这个需要一个字段做判断,加上正则表达式wxml文件: <block wx:for="{{liuliangItems}}"> <block wx:if="{{item.one2one == 1}}"> &l
微信小程序动态绑定数据及动态事件处理

微信小程序动态绑定数据及动态事件处理关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="
微信小程序基于slider组件动态修改标签透明度的方法示例

本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo
微信小程序如何根据不同用户切换不同TabBar(简单易懂!)

目录现有需求: 1全局.app.json 2.自定义custom-tab-bar 结果展示总结现有需求: 小程序用户有三种身份(公众.运维人员.领导),根据不同用户身份显示不同的tabbar 众所周知微信小程序全局文件app.json里面的"tabBar"里面的list只能放置2-5个,要想实现3个tabbar,必须得复用tabbar,三种身份都需要个人中心,剩下的是长列表(两个),表单,图表刚好是5个,废话少说,上代码代码有点长,建议仔细看一下 1全局.app.json t

微信小程序点击按钮动态切换input的disabled禁用/启用状态功能

相关推荐

随机推荐