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

5星 · 超过95%的资源 174 浏览量更新于2023-05-04 评论 1 收藏 53KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

功能功能

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

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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论10

FelaniaLiu

2023-06-16

动态切换input的disabled状态，加强用户体验。

weixin_38675777

粉丝: 3
资源: 918

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈