easyui 复选框 赋值、禁用、取值
实现效果如下
页面代码
<div id="static" class="parentCode">
<div class="child">
<label for="name">扫码环节 </label>
<input class="easyui-checkbox static" id="static0" name="static" value="0"> 挂</input>
<input class="easyui-checkbox static" id="static1" name="static" value="1"> 诊</input>
<input class="easyui-checkbox static" id="static2" name="static" value="2"> 取</input>
<input class="easyui-checkbox static" id="static3" name="static" value="3"> 检</input>
<input class="easyui-checkbox static" id="static4" name="static" value="4"> 支</input>
<input class="easyui-checkbox static" id="static5" name="static" value="5"> 开</input>
<input class="easyui-checkbox static" id="static6" name="static" value="6"> 手</input>
<input class="easyui-checkbox static" id="static7" name="static" value="7"> 其</input>
</div>
</div>
<div>
<div class="parentCode2">
<div class="child2">
有效周期
<select id="cycle" class="easyui-combobox" name="cycle" style="width:100px;" data-options="panelHeight:'auto',editable:false">
<option value="0">60s</option>
<option value="1">90s</option>
<option value="2">120s</option>
</select>
</div>
</div>
<div id="dynamic" class="parentCode2">
<div class="child3">
<label for="name">扫码环节 </label>
<input class="easyui-checkbox dynamic" id="dynamic0" name="dynamic" value="0"> 挂</input>
<input class="easyui-checkbox dynamic" id="dynamic1" name="dynamic" value="1"> 诊</input>
<input class="easyui-checkbox dynamic" id="dynamic2" name="dynamic" value="2"> 取</input>
<input class="easyui-checkbox dynamic" id="dynamic3" name="dynamic" value="3"> 检</input>
<input class="easyui-checkbox dynamic" id="dynamic4" name="dynamic" value="4"> 支</input>
<input class="easyui-checkbox dynamic" id="dynamic5" name="dynamic" value="5"> 开</input>
<input class="easyui-checkbox dynamic" id="dynamic6" name="dynamic" value="6"> 手</input>
<input class="easyui-checkbox dynamic" id="dynamic7" name="dynamic" value="7"> 病</input>
</div>
</div>
</div>
<div id="resetPswButtons" style="margin-top: 15px">
<a class="easyui-linkbutton saveBt" style="width: 100px" onclick="save()">确定</a>
</div>JavaScript代码
//后台返回list对象
$(function () {
$.ajax({
url:'selectAllQrcodes',
type:'get',
success: function (data) {
//赋值
for(var i=0;i<data.length;i++) {
if(data[i].qrcodeType == 1){
$('#'+data[i].stepCode).checkbox({
checked: true
});
if(data[i].stepValue !=7){
$('#dynamic' + data[i].stepValue).checkbox({
disabled: true
});
}
}
if(data[i].qrcodeType == 2){
if(data[i].stepCode == 'cycle'){
$('#cycle').combobox('setValue', data[i].stepValue);
}else{
$('#'+data[i].stepCode).checkbox({
checked: true
});
if(data[i].stepValue !=7){
$('#static' + data[i].stepValue).checkbox({
disabled: true
});
}
}
}
}
}
});
});
//选中后禁用相对的选项
$('.static').checkbox({
onChange:function() {
var val = $(this).checkbox('options').value;
if (val != 7) {
var ch = $(this).checkbox('options')['checked'];
if (ch == false) {
$('#dynamic' + val).checkbox({
disabled: false
});
} else {
$('#dynamic' + val).checkbox({
disabled: true
});
}
}
}
});
$('.dynamic').checkbox({
onChange:function(){
var val = $(this).checkbox('options').value;
if(val!=7){
var ch = $(this).checkbox('options')['checked'];
if(ch == false){
$('#static'+val).checkbox({
disabled:false
});
}else {
$('#static'+val).checkbox({
disabled:true
});
}
}
}
});
//保存操作
function save() {
var staticArr = new Array();
$("input[name='static']:checked").each(function(i){
staticArr[i] = $(this).val();
});
var staticVals = staticArr.join(",");
var dynamicArr = new Array();
$("input[name='dynamic']:checked").each(function(i){
dynamicArr[i] = $(this).val();
});
var dynamicVals = dynamicArr.join(",");
var cycleVal = $('#cycle').combobox('getValue');
var data = {
staticVals:staticVals,
dynamicVals:dynamicVals,
cycleVal:cycleVal
}
$.ajax({
url:'save',
type:'post',
data:data,
dataType:'json',
success: function (result) {
if(result.retCode == 1){
$.messager.show({
title: '提示信息',
msg: result.retMsg,
timeout: 3000,
showType: 'slide'
});
}else {
$.messager.alert('提示信息',result.retMsg, 'warning');
}
}
});
}