首页
所有分类
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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
网页收藏夹显示ICO图标（代码少）
Aug 04 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
教大家轻松制作Bootstrap漂亮表格（table）
Dec 13 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 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
根德(2) PL660(1) 南麂列岛(1) S2000(3) 森海(1) 松下(1) MX500(1) 台湾(1) SRF-S84(1) SRF-S83(1)
You might like
十天学会php之第一天
2006/10/09 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
用JS实现图片轮播效果代码（一）
2016/06/26 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
浅析vue-router原理
2018/10/19 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python中如何使用insert函数
2020/01/09 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
英国时尚服饰电商：Boohoo
2017/10/12 全球购物
荷兰街头时尚之家：Funkie House
2019/03/18 全球购物
英国领先的在线高尔夫商店：Gamola Golf
2019/11/16 全球购物
阿迪达斯越南官网：adidas越南
2020/07/19 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
家长会标语
2014/06/24 职场文书
捐助感谢信
2015/01/22 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers