LayUI动态设置checkbox不显示的解决方法
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 复选框等内置控件不显示的问题
将复选框的代码原封不动地粘上后居然不显示 需要加入下列代码,监听form,才会显示控件 <script> layui.use('form', function () { var form = layui.form; }); </script> tab也是一样的原理,显示tab需要加上 <script> // tab控件必须有下面的代码,才可以切换 layui.use('element', function () { var element = layui.element
-
layui的table单击行勾选checkbox功能方法
如下所示: //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); //存在固定列 if (tableBox.find(".l
-
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <
-
解决Layui数据表格中checkbox位置不居中的方法
1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,
-
layui表格checkbox选择全选样式及功能的实例
在之前的版本,默认复选框是要有值得,默认为"勾选"两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作. 1.layui版本号为 v1.0.9 rls版本(当前最新版本) <span style="white-space:pre;"> </span><div class="layui-form"> <table class="layui-
-
LayUI动态设置checkbox不显示的解决方法
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" r
-
关于layui的动态图标不显示的解决方法
1.保证在正确引入layui的CSS和JS后 用法如下: <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="display: inline-block"></i> layui-icon layui-icon-loading :这个是引用体图标的固定写法,图标出来是静态的 layui-anim layui-an
-
Layui动态生成select下拉选择框不显示的解决方法
给代码添加如下部分: layui.use('form', function(){ //此段代码必不可少 var form = layui.form; form.render(); }); 实现效果: HTML代码: <div class="layui-form-item"> <label class="layui-form-label">执行周期</label> <div class="layui-input-in
-
layui 动态设置checbox 选中状态的例子
最近在使用layui前端框架,在使用单选按钮.下拉菜单select.checkbox等控件的时候 往往遇到一些初始化的东西. 有时候会发现,自己动态append进去的代码要不就是没有显示,要不就是初始化默认选中出问题. 以上这些情况进行了测试: 第一种情况:动态append()html代码后没有显示空间的解决方案: 添加 layui.form.render();//重新渲染 可以解决多种没有显示的情况 第二种情况:动态设置默认选中状态没有效果解决方案: 细分为两种情况: (1)在html页面代码
-
layui的面包屑或者表单不显示的解决方法
如下所示: 页面上显示空白 是因为加了hidden:让我们去查查官方文档 官方是这样描述的 当你使用表单时,Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果.Tab选项卡等同理(它们需依赖 element 模块) layui.use('element', function(){ var element = layui.element; //导
-
基于Echarts图表在div动态切换时不显示的解决方式
简单粗暴,先上图,大概长这样: 在使用vue时有遇到像上图下拉框change事件切换div,change切完后大概会变成这个样子: 上代码: <div class="test"> <p class="title"> <select v-model="selected" v-on:change="change"> <option v-for="option in options
-
Vue中img的src是动态渲染时不显示的解决
今天在项目中遇到一个需求,设计稿如下 就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用vue. 自然而然采用条件渲染,我的代码如下: 保存运行查看,发现没显示默认的图片,审查元素发现图片没有被打包 有点懵~ 后来查阅资料发现图片使用require引入即可,更改后代码为: 搞定~ 以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
Android 百度地图marker中图片不显示的解决方法(推荐)
目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: 通过查阅百度官网的文档,我们可以知道,地图标注物的实现方法如下: //定义Maker坐标点 LatLng point = new LatLng(39.963175, 116.400244); //构建Marker图标 BitmapDescriptor bitmap = BitmapDescript
-
layui layer select 选择被遮挡的解决方法
在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况: 解决方法:在页面里面找到对应div的class 给overflow新的属性visible即可(默认值.内容不会被修剪,会呈现在元素框之外.)即可显示出下拉框 1.找到层1 的overflow 属性, 修改成为visible. 2. 如果有层2, 就把层2的也设置一下, 就完美解决了!!! 示例: 下面是一些示例: $(".layui-table-body").css('overflow','visible');
-
CI分页类首页、尾页不显示的解决方法
本文实例讲述了CI分页类首页.尾页不显示的解决方法.分享给大家供大家参考,具体如下: 看了下手册说,每次都要重新去写一次呢些$config,可以新建一个文件放到config文件夹下面,考虑了下,config这个文件夹系统会自动加载,也就是说不管你访问什么页面这文件夹里面的所有信息都会被加载,所以,要想在这个文件里面去写就需要写方法,这样即使加载如果不去加载也是没有关系的.本人没有沿用手册上的说法做. 我的思路:既然我们是在CI这框架下写的东西,而且每个控制器都会引入父类CI_Controller