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


Posted in Javascript onSeptember 02, 2019

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

Javascript 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
Vue中props的详解
May 16 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 #Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 #Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 #Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 #Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 #Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 #Javascript
JavaScript页面加载事件实例讲解
Sep 01 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
mysql+php分页类(已测)
2008/03/31 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
详解React中setState回调函数
2018/06/14 Javascript
详解redux异步操作实践
2018/08/15 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
django和vue实现数据交互的方法
2019/08/21 Python
在django模板中实现超链接配置
2019/08/21 Python
python内置模块collections知识点总结
2019/12/19 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
学生个人自我鉴定
2014/03/26 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
运动会班级前导词
2015/07/20 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
OpenCV-Python实现轮廓拟合
2021/06/08 Python
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android