微信小程序点击按钮动态切换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与HTML的交互事件
Apr 12 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
PHP利用str_replace防注入的方法
2013/11/10 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
python模拟事件触发机制详解
2018/01/19 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
大学生自我鉴定
2013/12/08 职场文书
奖金申请报告模板
2015/05/15 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
民事调解书范文
2015/05/20 职场文书
党员转正党支部意见
2015/06/02 职场文书