解决“微信小程序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"是无效的，接下来，我先解释一下：

注意一下官方文档中，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
})

 

希望这篇文章能帮助到大家，祝大家生(sheng)活(zhi)愉(jia)快(xin)！