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 相关文章推荐
JS数组去重与取重的示例代码
Jan 24 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
js实现自定义右键菜单
May 18 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
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
详解Vue 全局变量,局部变量
2019/04/17 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
vue中activated的用法
2021/01/03 Vue.js
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python中的协程深入理解
2019/06/10 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Python urllib2运行过程原理解析
2020/06/04 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
法人代表授权委托书
2014/04/08 职场文书
高中课程设置方案
2014/05/28 职场文书
工程资料员岗位职责
2015/04/13 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
七年级数学教学反思
2016/02/17 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电