LayUI動(dòng)態(tài)設(shè)置checkbox不顯示的解決方法
1.頁(yè)面引入layui.js和layui.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手機(jī)銀行權(quán)限配置</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">新版手機(jī)銀行權(quán)限動(dòng)態(tài)配置</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">行內(nèi)轉(zhuǎn)賬交易</option>
<option value="InlineBookTransfer">行內(nèi)預(yù)約轉(zhuǎn)賬</option>
<option value="SavToSavAuthPwd">行內(nèi)同名轉(zhuǎn)賬</option>
<option value="IntercityTransfer">跨行轉(zhuǎn)賬交易</option>
<option value="IntercityBookTransfer">跨行預(yù)約轉(zhuǎn)賬</option>
<option value="WeiXinTransfer">微信轉(zhuǎn)賬交易</option>
</select>
</div>
</div>
<div class="layui-form-item" style="display: inline-block;">
<label class="layui-form-label">要配置的注冊(cè)類型</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>默認(rèn)規(guī)則</h2>
<hr>
<div class="layui-form-item">
<label class="layui-form-label">支持的賬戶注冊(cè)類型</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">支持的最小版本號(hào)</label>
<div class="layui-input-block">
<input type="text" name="MinVersion" required lay-verify="required" placeholder="請(qǐng)輸入支持的最小版本號(hào)"
id="MinVersion"
autocomplete="off" class="layui-input">
</div>
</div>
<br>
<h2>靜態(tài)規(guī)則</h2>
<hr>
<div class="layui-form-item">
<label class="layui-form-label">人臉識(shí)別</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">短信驗(yàn)證碼</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">人臉識(shí)別相似度</label>
<div class="layui-input-block">
<input type="number" name="FaceSimilarity" required lay-verify="required" placeholder="請(qǐng)輸入人臉識(shí)別相似度"
id="FaceSimilarity"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">指紋識(shí)別</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>動(dòng)態(tài)規(guī)則</h2>
<hr>
<div class="layui-form-item">
<label class="layui-form-label">超出日限額人臉識(shí)別</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">超出日限額指紋識(shí)別</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">啟用圖形驗(yàn)證碼次數(shù)</label>
<div class="layui-input-block">
<input type="number" name="NeedImageCheck" required lay-verify="required" placeholder="請(qǐng)輸入啟用圖形驗(yàn)證碼的次數(shù)"
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="">請(qǐng)選擇替換方式</option>
<option value="AB">人臉識(shí)別和短信驗(yàn)證碼可替換</option>
<option value="AC">人臉識(shí)別和交易密碼可替換</option>
<option value="AD">人臉識(shí)別和指紋識(shí)別可替換</option>
<option value="BC">短信驗(yàn)證碼和交易密碼可替換</option>
<option value="BD">短信驗(yàn)證碼和指紋識(shí)別可替換</option>
<option value="CD">交易密碼和指紋識(shí)別可替換</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.頁(yè)面js中要進(jìn)行l(wèi)ayui模塊的初始化
/**
* 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(); //渲染頁(yè)面
})
/**
* 頁(yè)面加載完成后執(zhí)行
*/
$(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設(shè)置不選中
*/
$(":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) {
/**
* 最小版本號(hào)
*/
$("#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("請(qǐng)輸入支持的最低版本號(hào)");
return;
}
if (faceSimilarity == '') {
layer.alert("請(qǐng)輸入人臉識(shí)別相似度");
return;
}
if (needImageCheck == '') {
layer.alert("請(qǐng)輸入啟用圖形驗(yàn)證碼的次數(shù)");
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動(dòng)態(tài)設(shè)置checkbox不顯示的解決方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Layui Table js 模擬選中checkbox的例子
- layui之table checkbox初始化時(shí)選中對(duì)應(yīng)選項(xiàng)的方法
- 解決layui checkbox 提交多個(gè)值的問題
- layui checkbox默認(rèn)選中,獲取選中值,清空所有選中項(xiàng)的例子
- 解決Layui數(shù)據(jù)表格中checkbox位置不居中的方法
- 解決Layui選擇全部,換頁(yè)checkbox復(fù)選框重新勾選的問題方法
- layui的table單擊行勾選checkbox功能方法
- layui表格checkbox選擇全選樣式及功能的實(shí)例
- layui實(shí)現(xiàn)checkbox的目錄樹tree的例子
相關(guān)文章
IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無(wú)效的解決方法
這篇文章主要介紹了IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無(wú)效的解決方法,涉及針對(duì)javascript加載順序的調(diào)整,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
javascript寫的一個(gè)模擬閱讀小說(shuō)的程序
這篇文章主要介紹了用javascript寫了一個(gè)模擬閱讀小說(shuō)的程序,需要的朋友可以參考下2014-04-04
javascript substr和substring用法比較
在js中substring和substr都是用來(lái)截取字符串的,那么substring和substr之間的具體區(qū)別在哪里,有沒有區(qū)別呢,下面我來(lái)給各位詳細(xì)引用一些實(shí)例來(lái)介紹這些問題2009-06-06
JavaScript閉包和作用域鏈的定義實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript閉包和作用域鏈的定義與實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
JavaScript中的this基本問題實(shí)例小結(jié)
這篇文章主要介紹了JavaScript中的this基本問題,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中this的功能、常見用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法
這篇文章主要介紹了JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
JS中的hasOwnProperty()和isPrototypeOf()屬性實(shí)例詳解
hasOwnProperty()和isPrototypeOf()這兩個(gè)屬性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf(),下面給大家介紹這兩個(gè)屬性的方法和使用,一起看下吧2016-08-08
用Javascript同時(shí)提交多個(gè)Web表單的方法
使用Javascript同時(shí)提交多個(gè)Web表單的方法2009-12-12

