1.頁(yè)面引入layui.js和layui.css
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>手機(jī)銀行權(quán)限配置</title> <link type="text/css" rel="stylesheet" href="common/layui/css/layui.css" rel="external nofollow" /> <link type="text/css" rel="stylesheet" href="css/index.css" rel="external nofollow" /> <link rel="shortcut icon" href="images/favicon.ico" rel="external nofollow" /></head><body><br><h1 align="center">新版手機(jī)銀行權(quán)限動(dòng)態(tài)配置</h1><br><div class="layui-form" style="width:60%;margin: 0 auto;"> <div class="layui-form-item" style="display: inline-block;"> <label class="layui-form-label">交易類(lèi)型</label> <div class="layui-input-block"> <select name="TransactionType" lay-search id="TransactionType"lay-filter="type"> <option value="InlineTransfer">行內(nèi)轉(zhuǎn)賬交易</option> <option value="InlineBookTransfer">行內(nèi)預(yù)約轉(zhuǎn)賬</option> <option value="SavToSavAuthPwd">行內(nèi)同名轉(zhuǎn)賬</option> <option value="IntercityTransfer">跨行轉(zhuǎn)賬交易</option> <option value="IntercityBookTransfer">跨行預(yù)約轉(zhuǎn)賬</option> <option value="WeiXinTransfer">微信轉(zhuǎn)賬交易</option> </select> </div> </div> <div class="layui-form-item" style="display: inline-block;"> <label class="layui-form-label">要配置的注冊(cè)類(lèi)型</label> <div class="layui-input-block"> <select name="RegisterType" lay-search id="RegisterType" lay-filter="type"> <option value="T">T</option> <option value="S">S</option> <option value="R">R</option> </select> </div> </div> <button class="layui-btn" style="display: inline-block;" onclick="info()">開(kāi)始配置</button></div><div style="width:60%;margin:0 auto;border: 1px solid #ccc;border-radius: 10px;"> <form class="layui-form" style="width:500px !important;margin:0 auto; " action="update" id="updateForm" method="post"> <input type="hidden" name="TransactionType" id="TransactionType2"/> <input type="hidden" name="RegisterType" id="RegisterType2"/> <br> <h2>默認(rèn)規(guī)則</h2> <hr> <div class="layui-form-item"> <label class="layui-form-label">支持的賬戶(hù)注冊(cè)類(lèi)型</label> <div class="layui-input-block"> <input type="checkbox" name="RegisterFlag" title="T類(lèi)" value="T" > <input type="checkbox" name="RegisterFlag" title="S類(lèi)" value="S" > <input type="checkbox" name="RegisterFlag" title="R類(lèi)" value="R" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">支持的最小版本號(hào)</label> <div class="layui-input-block"> <input type="text" name="MinVersion" required lay-verify="required" placeholder="請(qǐng)輸入支持的最小版本號(hào)" id="MinVersion" autocomplete="off" class="layui-input"> </div> </div> <br> <h2>靜態(tài)規(guī)則</h2> <hr> <div class="layui-form-item"> <label class="layui-form-label">人臉識(shí)別</label> <div class="layui-input-block"> <select name="NeedFaceCheck" lay-search id="NeedFaceCheck"> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">短信驗(yàn)證碼</label> <div class="layui-input-block"> <select id="NeedOtpCheck" name="NeedOtpCheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> <option value="2">免短信</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">交易密碼</label> <div class="layui-input-block"> <select name="NeedTrsPwdCheck" id="NeedTrsPwdCheck"lay-search> <option value="0">不需要</option> <option value="1">需要</option> <option value="2">免密</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">支持的賬戶(hù)種類(lèi)</label> <div class="layui-input-block"> <input type="checkbox" name="SupportAcClass" title="I類(lèi)戶(hù)" value="01"> <input type="checkbox" name="SupportAcClass" title="II類(lèi)戶(hù)" value="02"> <input type="checkbox" name="SupportAcClass" title="III類(lèi)戶(hù)" value="03"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">II類(lèi)戶(hù)配卡情況</label> <div class="layui-input-block"> <select name="SecondAcIssuedFlag" id="SecondAcIssuedFlag" lay-search> <option value="0">必須不配卡</option> <option value="1">必須配卡</option> <option value="2">配卡與否都允許</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">人臉識(shí)別相似度</label> <div class="layui-input-block"> <input type="number" name="FaceSimilarity" required lay-verify="required" placeholder="請(qǐng)輸入人臉識(shí)別相似度" id="FaceSimilarity" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">指紋識(shí)別</label> <div class="layui-input-block"> <select name="NeedFingerprintCheck" id="NeedFingerprintCheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <br> <br> <h2>動(dòng)態(tài)規(guī)則</h2> <hr> <div class="layui-form-item"> <label class="layui-form-label">超出日限額人臉識(shí)別</label> <div class="layui-input-block"> <select name="OverLimitNeedFaceCheck" id="OverLimitNeedFaceCheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">超出日限額指紋識(shí)別</label> <div class="layui-input-block"> <select name="OverLimitNeedFingerprintCheck" id="OverLimitNeedFingerprintCheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">啟用圖形驗(yàn)證碼次數(shù)</label> <div class="layui-input-block"> <input type="number" name="NeedImageCheck" required lay-verify="required" placeholder="請(qǐng)輸入啟用圖形驗(yàn)證碼的次數(shù)" id="NeedImageCheck" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">可替換方式</label> <div class="layui-input-block"> <select name="AllowSubstitution" lay-search lay-filter="sit" id="AllowSubstitution"> <option value="">請(qǐng)選擇替換方式</option> <option value="AB">人臉識(shí)別和短信驗(yàn)證碼可替換</option> <option value="AC">人臉識(shí)別和交易密碼可替換</option> <option value="AD">人臉識(shí)別和指紋識(shí)別可替換</option> <option value="BC">短信驗(yàn)證碼和交易密碼可替換</option> <option value="BD">短信驗(yàn)證碼和指紋識(shí)別可替換</option> <option value="CD">交易密碼和指紋識(shí)別可替換</option> </select> </div> </div> <br> <hr> <br> </form> <div class="layui-form"> <div class="layui-form-item" style=" margin: 0 auto;"> <div class="layui-input-block" style="text-align: center; right:10%; "> <button class="layui-btn" onclick="update()">立即提交</button> </div> </div> </div> <br><br> </div> <br><br><br><br><br><script type="text/javascript" src="common/jquery/jquery.js"></script><script type="text/javascript" src="common/layui/layui.js"></script><script type="text/javascript" src="js/index.js"></script></body></html>
2.頁(yè)面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(); //渲染頁(yè)面 }) /** * 頁(yè)面加載完成后執(zhí)行 */$(function () { //初始化 $("#TransactionType2").val($("#TransactionType").val()); $("#RegisterType2").val($("#RegisterType").val()); //查詢(xún) info();}) //查詢(xún)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) { /** * 最小版本號(hào) */ $("#MinVersion").val(res.MinVersion); /** *支持的賬戶(hù)類(lèi)型 * @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); } /** * 支持的賬戶(hù)種類(lèi) * @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("請(qǐng)輸入支持的最低版本號(hào)"); return; } if (faceSimilarity == '') { layer.alert("請(qǐng)輸入人臉識(shí)別相似度"); return; } if (needImageCheck == '') { layer.alert("請(qǐng)輸入啟用圖形驗(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動(dòng)態(tài)設(shè)置checkbox不顯示的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
