LayUI动态设置checkbox不显示的解决方法

2019-11-19 10:55:45

字体：大中小

来源：转载

供稿：网友

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不显示的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：解决layui checkbox 提交多个值的问题

下一篇：layui checkbox默认选中,获取选中值,清空所有选中项的例子