LayUi使用switch開關(guān),動態(tài)的去控制它是否被啟用的方法
更新時間：2019年09月21日 09:03:48 作者：活著1989
今天小編就為大家分享一篇LayUi使用switch開關(guān),動態(tài)的去控制它是否被啟用的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
layui中的switch開關(guān)，能夠去顯示當(dāng)前的狀態(tài)，是否是啟用還是禁用。當(dāng)時如果當(dāng)前記錄的某個值沒有進(jìn)行填寫，這行記錄就不能被啟用。并且頁面上也要讓他不能進(jìn)行操作。
直接上代碼：
// 頁面狀態(tài)欄事件監(jiān)聽
form.on('switch', function (data) {
var swithcData = data;
var id = data.value;// 獲取要修改的ID
var state = this.checked ? '0' : '2';// 當(dāng)前狀態(tài)值
$.ajax({
url: '/adChannelConfig/editState',
data: {
"id": id,
"state": state
},
error: function (data) {
console.log(data);
layer.msg('數(shù)據(jù)異常，操作失敗！');
},
// 修改失敗，請?zhí)顚憣?yīng)的參數(shù)
success: function (data) {
if (data.data) {
layer.msg('操作成功！');
} else {
layer.msg(data.msg);
var em = $(swithcData.othis[0]);
swithcData.othis[0].classList.remove('layui-form-onswitch');
em.children('em').text('停用');
}
}
});
});
當(dāng)后臺發(fā)送添加失敗的數(shù)據(jù)過來的時候，走的下面的else，我們把當(dāng)前DOM對象用一個變量 swithcData 去接收，這個時候去刪除到它的class屬性。這個是來控制layui的switch的頁面顯示。
dom中的0里面，需要點擊那個0才能實現(xiàn)，而數(shù)字型的屬性名不能用“.”來獲取，故寫成[0]。
以上這篇LayUi使用switch開關(guān),動態(tài)的去控制它是否被啟用的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS保存、讀取 換行 轉(zhuǎn)Json報錯異常信息：Unexpected token ILLEGAL，具體解決方法如下，感性的朋友可以參考下哈2013-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)右鍵菜單欄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
自動完成JS類，用戶體驗較好。封裝成類，方便使用。本站2009-03-03
JavaScript實現(xiàn)三級聯(lián)動菜單效果
這篇文章主要為大家詳細(xì)介紹了三級聯(lián)動菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Event altKey,ctrlKey,shiftKey屬性解析
本篇文章主要是對Event altKey,ctrlKey,shiftKey屬性解析了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了Three.js截圖并下載的大坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
簡單的兩種Extjs formpanel加載數(shù)據(jù)的方式
這篇文章介紹了兩種Extjs formpanel加載數(shù)據(jù)的方式，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了小程序接入騰訊位置服務(wù)的詳細(xì)流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了JS實現(xiàn)在頁面隨時自定義背景顏色的方法,實例分析了javascript操作css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
學(xué)習(xí)JavaScript設(shè)計模式(封裝)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計模式，其中重點介紹封裝，舉例說明封裝的思想，對封裝進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-11-11