今天就跟大家聊聊有關(guān)如何在LayUI中動(dòng)態(tài)設(shè)置checkbox,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
成都創(chuàng)新互聯(lián)公司擁有網(wǎng)站維護(hù)技術(shù)和項(xiàng)目管理團(tuán)隊(duì),建立的售前、實(shí)施和售后服務(wù)體系,為客戶提供定制化的成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)站維護(hù)、遂寧托管服務(wù)器解決方案。為客戶網(wǎng)站安全和日常運(yùn)維提供整體管家式外包優(yōu)質(zhì)服務(wù)。我們的網(wǎng)站維護(hù)服務(wù)覆蓋集團(tuán)企業(yè)、上市公司、外企網(wǎng)站、商城系統(tǒng)網(wǎng)站開發(fā)、政府網(wǎng)站等各類型客戶群體,為全球千余家企業(yè)提供全方位網(wǎng)站維護(hù)、服務(wù)器維護(hù)解決方案。
1.頁面引入layui.js和layui.css
手機(jī)銀行權(quán)限配置
新版手機(jī)銀行權(quán)限動(dòng)態(tài)配置
2.頁面js中要進(jìn)行l(wèi)ayui模塊的初始化
/** * layui的模塊初始化 */ layui.use(['form', 'layer'], function () { var form = layui.form; form.on('select(type)', function (data) { $("#TransactionType2").val($("#TransactionType").val()); $("#RegisterType2").val($("#RegisterType").val()); info(); }) form.render(); //渲染頁面 }) /** * 頁面加載完成后執(zhí)行 */ $(function () { //初始化 $("#TransactionType2").val($("#TransactionType").val()); $("#RegisterType2").val($("#RegisterType").val()); //查詢 info(); }) //查詢 function info() { var transactionType = $("#TransactionType").val(); var registerType = $("#RegisterType").val(); var data = { TransactionType: transactionType, RegisterType: registerType }; /** * 將所有的checkbox設(shè)置不選中 */ $(":checkbox").prop("checked", false); var index = layer.load(2); $.ajax({ type: 'post', url: 'info', data: data, success: function (res) { layer.close(index); if (res.code == 200) { /** * 最小版本號 */ $("#MinVersion").val(res.MinVersion); /** *支持的賬戶類型 * @type {string} */ var registerFlag = res.RegisterFlag + ""; var registerFlags = registerFlag.split(","); for (var i = 0; i < registerFlags.length; i++) { //選中checkbox $('[name="RegisterFlag"][value="' + registerFlags[i] + '"]').prop('checked', true); } /** * 支持的賬戶種類 * @type {string} */ var supportAcClass = res.SupportAcClass + ""; var supportAcClasses = supportAcClass.split(","); for (var i = 0; i < supportAcClasses.length; i++) { //選中checkbox $('[name="SupportAcClass"][value="' + supportAcClasses[i] + '"]').prop('checked', true); } // $("#NeedFaceCheck").find("option[value='"+res.NeedFaceCheck+"']").prop('selected',true); $("#NeedOtpCheck").val(res.NeedOtpCheck); $("#NeedFaceCheck").val(res.NeedFaceCheck); $("#NeedTrsPwdCheck").val(res.NeedTrsPwdCheck); $("#SecondAcIssuedFlag").val(res.SecondAcIssuedFlag); $("#FaceSimilarity").val(res.FaceSimilarity); $("#NeedFingerprintCheck").val(res.NeedFingerprintCheck); $("#OverLimitNeedFaceCheck").val(res.OverLimitNeedFaceCheck); $("#OverLimitNeedFingerprintCheck").val(res.OverLimitNeedFingerprintCheck); $("#NeedImageCheck").val(res.NeedImageCheck); $("#AllowSubstitution").val(res.AllowSubstitution); layui.use('form', function () { var form = layui.form; form.render('checkbox'); form.render('select'); }); } } }) } /** * 更新 */ function update() { layer.confirm(" 您確定要提交嗎?", {icon: 3, title: '溫馨提示'}, function () { var form = $("#updateForm"); var data = form.serialize(); var minVersion = $("#MinVersion").val(); var faceSimilarity = $("#FaceSimilarity").val(); var needImageCheck = $("#NeedImageCheck").val(); if (minVersion == '') { layer.alert("請輸入支持的最低版本號"); return; } if (faceSimilarity == '') { layer.alert("請輸入人臉識別相似度"); return; } if (needImageCheck == '') { layer.alert("請輸入啟用圖形驗(yàn)證碼的次數(shù)"); return; } var index = layer.load(2); $.ajax({ type: 'post', url: 'update', data: data, success: function (res) { layer.close(index); if (res.code == 200) { layer.alert("操作成功"); } else { layer.alert("操作失敗"); } } }) }) }
注意:
for (var i = 0; i < registerFlags.length; i++) { //選中checkbox $('[name="RegisterFlag"][value="' + registerFlags[i] + '"]').prop('checked', true); 必須要用prop 不能用attr }
layui是一款采用自身模塊規(guī)范編寫的前端UI框架,它遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,適合新手,并且它還提供了豐富的內(nèi)置模塊,他們皆可通過模塊化的方式按需加載,從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過精心雕琢,非常適合界面的快速開發(fā),能夠作為PC網(wǎng)頁端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開發(fā)方案。
看完上述內(nèi)容,你們對如何在LayUI中動(dòng)態(tài)設(shè)置checkbox有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。