做微信小程序項目的時候遇到一個功能，個人信息資料的修改與保存。以下是說明及簡化后的代碼：

創(chuàng)新互聯(lián)公司致力于網(wǎng)站建設(shè),網(wǎng)站制作設(shè)計,營銷網(wǎng)頁按需定制開發(fā),外貿(mào)營銷網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),微信平臺小程序開發(fā),網(wǎng)站SEO優(yōu)化,網(wǎng)站設(shè)計制作案例豐富,是成都做網(wǎng)站公司和建站公司,歡迎咨詢。

1.頁面加載完成時，所有input處于禁用狀態(tài)；

 2.點擊編輯按鈕時，文字切換成“保存”，身份證input保持始終不可修改狀態(tài)（即禁用）， 姓名input可以修改（即動態(tài)加載切換禁用/啟用）；

3.再次點擊按鈕文字切回“編輯”，所有input變?yōu)榻脿顟B(tài)。

以下是wxml部分

 {{text}} //綁定按鈕的點擊事件
 
 姓名：
 
 
 身份證號：
 
 

上段代碼中，姓名為動態(tài)加載狀態(tài)，所以disabled寫成disabled='{{isDisabled}}' 而身份證input為始終不可修改的狀態(tài)，所以disabled寫死為disabled=‘true'

以下是js部分

Page({
 data: {
 isDisabled:true, //表示頁面加載完成時disabled為啟用狀態(tài)
 text:"編輯" //表示按鈕初始文字為編輯
 },
 changeInfo(e) { //點擊事件發(fā)生時
 //一定要寫成this.data.isDisabled，不然判斷出不來
 if (!this.data.isDisabled) { //當disabled=false時
 this.setData({ 
 isDisabled: true, //修改isDisabled的值為true（即啟用狀態(tài)）
 text: "編輯" //文字修改為“編輯”
 })
 }
 else { //當disabled=true時
 this.setData({ 
 isDisabled: false, //修改isDisabled的值為false（即禁用狀態(tài)）
 text: "保存" //文字修改為“保存”
 })
 }
 }

將用戶信息數(shù)據(jù)動態(tài)加載到input框中，此過程中身份證始終保持不可修改的狀態(tài)，姓名可根據(jù)按鈕動態(tài)切換成編輯和保存的狀態(tài)。

下面給大家補充點知識解決“微信小程序disabled屬性不生效”的問題！

微信小程序中帶disabled屬性的表單組件有（點擊可以進入官方文檔）：

button，checkbox，input，picker，radio，slider，switch，textarea

如果是固定禁用組件的話，直接放上disabled就好，簡單粗暴，如：

1. 忽略值的情況：

測試

2. 使用值的情況：

測試
測試
 

測試
測試

在以上的錯誤寫法中，disabled="true"是有效的，但disabled="false"是無效的，接下來，我先解釋一下：

注意一下官方文檔中，disabled的值是布爾值（Boolean），而以上的字符串（String），賦值“false”就是true。

所以disabled="false"其實就是disabled=true，它的非禁用就無效了。

如果disabled的值是動態(tài)的靈活的話，如：

在index.js中，設(shè)置一個data數(shù)據(jù)變量

Page({
 data: {
 isDisabled: true
 }
})

在index.wxml中，用上表單組件

 
測試

修改disabled的值

this.setData({
 isDisabled: false
})

總結(jié)

到此這篇關(guān)于微信小程序點擊按鈕動態(tài)切換input的disabled禁用/啟用狀態(tài)功能的文章就介紹到這了,更多相關(guān)微信小程序切換input內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！