LayUI动态设置checkbox不显示的解决方法
程序员文章站
2023-10-23 15:21:11
1.页面引入layui.js和layui.css
<...
1.页面引入layui.js和layui.css
<!doctype html> <html> <head> <meta charset="utf-8"> <title>手机银行权限配置</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">新版手机银行权限动态配置</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">交易类型</label> <div class="layui-input-block"> <select name="transactiontype" lay-search id="transactiontype"lay-filter="type"> <option value="inlinetransfer">行内转账交易</option> <option value="inlinebooktransfer">行内预约转账</option> <option value="savtosavauthpwd">行内同名转账</option> <option value="intercitytransfer">跨行转账交易</option> <option value="intercitybooktransfer">跨行预约转账</option> <option value="weixintransfer">微信转账交易</option> </select> </div> </div> <div class="layui-form-item" style="display: inline-block;"> <label class="layui-form-label">要配置的注册类型</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()">开始配置</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>默认规则</h2> <hr> <div class="layui-form-item"> <label class="layui-form-label">支持的账户注册类型</label> <div class="layui-input-block"> <input type="checkbox" name="registerflag" title="t类" value="t" > <input type="checkbox" name="registerflag" title="s类" value="s" > <input type="checkbox" name="registerflag" title="r类" value="r" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">支持的最小版本号</label> <div class="layui-input-block"> <input type="text" name="minversion" required lay-verify="required" placeholder="请输入支持的最小版本号" id="minversion" autocomplete="off" class="layui-input"> </div> </div> <br> <h2>静态规则</h2> <hr> <div class="layui-form-item"> <label class="layui-form-label">人脸识别</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">短信验证码</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">支持的账户种类</label> <div class="layui-input-block"> <input type="checkbox" name="supportacclass" title="i类户" value="01"> <input type="checkbox" name="supportacclass" title="ii类户" value="02"> <input type="checkbox" name="supportacclass" title="iii类户" value="03"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">ii类户配卡情况</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">人脸识别相似度</label> <div class="layui-input-block"> <input type="number" name="facesimilarity" required lay-verify="required" placeholder="请输入人脸识别相似度" id="facesimilarity" 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="needfingerprintcheck" id="needfingerprintcheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <br> <br> <h2>动态规则</h2> <hr> <div class="layui-form-item"> <label class="layui-form-label">超出日限额人脸识别</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">超出日限额指纹识别</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">启用图形验证码次数</label> <div class="layui-input-block"> <input type="number" name="needimagecheck" required lay-verify="required" placeholder="请输入启用图形验证码的次数" 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="">请选择替换方式</option> <option value="ab">人脸识别和短信验证码可替换</option> <option value="ac">人脸识别和交易密码可替换</option> <option value="ad">人脸识别和指纹识别可替换</option> <option value="bc">短信验证码和交易密码可替换</option> <option value="bd">短信验证码和指纹识别可替换</option> <option value="cd">交易密码和指纹识别可替换</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.页面js中要进行layui模块的初始化
/** * 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(); //渲染页面 }) /** * 页面加载完成后执行 */ $(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设置不选中 */ $(":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("请输入启用图形验证码的次数"); 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动态设置checkbox不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。