LayUI动态设置checkbox不显示的解决方法
程序员文章站
2023-12-02 16:16:52
1.页面引入layui.js和layui.css
<...
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不显示的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。