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

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

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

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

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

以下是wxml部分

1. <view class="btn">
2. <button bindtap="changeInfo">{{text}}</button> //绑定按钮的点击事件
3. </view>
4. <view>姓名：
5. <input class="uName" type="text" disabled='{{isDisabled}}'/>
6. </view>
7. <view>身份证号：
8. <input class="uIdentity" type="idcard" disabled='true'/>
9. </view>
10.  

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

以下是js部分

1. Page({
2. data: {
3. isDisabled:true, //表示页面加载完成时disabled为启用状态
4. text:"编辑" //表示按钮初始文字为编辑
5. },
6. changeInfo(e) { //点击事件发生时
7. //一定要写成this.data.isDisabled，不然判断出不来
8. if (!this.data.isDisabled) { //当disabled=false时
9. this.setData({
10. isDisabled: true, //修改isDisabled的值为true（即启用状态）
11. text: "编辑" //文字修改为“编辑”
12. })
13. }
14. else { //当disabled=true时
15. this.setData({
16. isDisabled: false, //修改isDisabled的值为false（即禁用状态）
17. text: "保存" //文字修改为“保存”
18. })
19. }
20. }
21.  

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

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

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

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

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

1. 忽略值的情况：

<button disabled>测试</button>

2. 使用值的情况：

1. <!-- 正确 -->
2. <button disabled="{{true}}">测试</button>
3. <button disabled="{{false}}">测试</button>
4.  
5. <!-- 错误 -->
6. <button disabled="true">测试</button>
7. <button disabled="false">测试</button>

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

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

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

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

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

1. Page({
2. data: {
3. isDisabled: true
4. }
5. })

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

1. <input type="text" disabled="{{isDisabled}}" />
2.  
3. <button disabled="{{isDisabled}}">测试</button>

修改disabled的值

1. this.setData({
2. isDisabled: false
3. })
4.  

总结

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