欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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