微信小程序點擊按鈕動態切換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內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持我們！