微信小程序点击按钮动态切换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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python中如何使用虚拟环境
2020/10/14 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
nohup的用法
2012/11/26 面试题
高考自主招生自荐信
2013/10/20 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
车间主任岗位职责
2014/03/16 职场文书
个园导游词
2015/02/04 职场文书
老公保证书怎么写
2015/02/26 职场文书