首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

别等时光染了梦想

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
JQuery小知识
Oct 15 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
深入理解JavaScript系列（41）：设计模式之模板方法详解
Mar 04 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
Javascript 对象（object）合并操作实例分析
Jul 30 Javascript
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
Nov 21 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
森海(1) MX500(1) 南麂列岛(1) S2000(3) YB217(1) YB235(1) 1 Tube Radio(1) YB400(2) 再生机(1) 直流胆(1)
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
php实现的简单日志写入函数
2015/03/31 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
理解Javascript闭包
2013/11/01 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
深入理解Python中字典的键的使用
2015/08/19 Python
python机器学习实战之树回归详解
2017/12/20 Python
Django重装mysql后启动报错：No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
W Concept美国：精选全球独立设计师
2017/02/22 全球购物
匡威西班牙官网：Converse西班牙
2019/10/01 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
初二学习计划书范文
2014/04/27 职场文书
活动总结书
2014/05/08 职场文书
职业规划实施方案
2014/06/10 职场文书
个人收入证明模板
2014/09/18 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书