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


Posted in Javascript onMarch 07, 2020

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

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"是无效的,接下来,我先解释一下:

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

注意一下官方文档中,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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 #Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 #Javascript
js实现选项卡效果
Mar 07 #Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 #Javascript
js实现简单放大镜效果
Mar 07 #Javascript
js实现文字头像的生成代码
Mar 07 #Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 #Javascript
You might like
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php分页函数完整实例代码
2014/09/22 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
JS 对象介绍
2010/01/20 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
高效使用Python字典的清单
2018/04/04 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
详解python中eval函数的作用
2019/10/22 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
教你打造完美的创业计划书
2014/01/06 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
立志成才演讲稿
2014/09/04 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
聘任证明怎么写
2015/03/02 职场文书
药店营业员岗位职责
2015/04/14 职场文书
百年校庆感言
2015/08/01 职场文书
golang特有程序结构入门教程
2021/06/02 Python