微信小程序按钮的禁用和使能

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

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就好，简单粗暴

微信小程序按钮的禁用和使能相关推荐

微信小程序按钮分享好友的onShareAppMessage不起作用的解决办法
特别汗颜,找了各种办法,都没有解决,最后发现,原来系统会自带一个空的onShareAppMessage函数,结果是被系统的空函数覆盖了..... JS函数如下: /* 转发*/onShareAppMe ...
微信小程序按钮失效的几大原因
微信小程序按钮失效的几大原因(里面有大坑) 最近在学习小程序的开发,边学习边敲代码,发现设置了按钮事件后页面就是跳转不成功,也没有报错,先将页面跳转三种方式列出供大家参考: wx.navigateTo ...
按钮点击_如何设置微信小程序按钮点击事件？
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...
微信小程序按钮Button使用详解
最近在出微信小程序系列教程顺手写了点博客欢迎大家关注 button 用来实现按钮点击效果,本文章效果如下: 1 wxml 文件中在这里我就放了三个普通的按钮 <view class=&qu ...
微信开发工具button跳转页面_微信小程序按钮点击跳转页面详解
微信小程序中,按钮也是标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkP ...
微信小程序按钮实现点击复制功能的步骤
微信小程序功能篇01 关于微信小程序开发文档中的总结的一些开发经验分享: 点击按钮执行复制操作效果. . 按下粘贴或 Ctrl + V 可以进行粘贴操作复制实现的步骤. 获取要复制的文本数据 let ...
微信小程序按钮控件设置呈现效果
1.效果图在小程序中完成上述布局,需要设置四个按钮位置,控制每个按钮大小.设置按钮背景颜色,设置标题和图标的位置. 2.代码说明 2.1 index.wxml <view class=&quo ...
微信小程序按钮只有在调试下显示
今天客户反映微信小程序页面里面的分享按钮不显示我发现在本地和体验版的调试模式下都显示
微信小程序点击改变css,微信小程序按钮button样式修改自定义
在微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了. 插入button按钮并保存后,便可以以预览界面看到一个原始的按钮. 小程序样式修改默认没有对按钮设置任何样式时 ...

微信小程序按钮的禁用和使能

微信小程序按钮的禁用和使能相关推荐

最新文章

热门文章

微信小程序 按钮的禁用和使能

微信小程序 按钮的禁用和使能相关推荐

最新文章

热门文章

微信小程序按钮的禁用和使能

微信小程序按钮的禁用和使能相关推荐