效果图:
需求:
1.默认下是没有已审字样,提交后显示已审字样。
2.提交选中后的复选框,禁用,其他项还可以继续选择。
3.还可以在提交其他选项。
4.全选提交后,所有复选框禁用。
全选提交确认按钮后,复选框禁用,并添加已审字样。
.reviewed{
display:none;
color:white;
background:#ddd;
}
<div>
<input type="checkbox" class="checkall" value="" />
</div>
<ul class="ui-listview">
<li>
<input type="checkbox" class="checkitem" />
<div class='reviewed'>已审</div>
</li>
</ul>
<button id="checkSubmit">确定</button>
var data=newArr:[
{value:'全行业',id:'342'},
{value:'信息技术',id:'343'},
{value:'网络技术',id:'344'},
{value:'测试技术',id:'345'},
{value:'策略',id:'346'},
{value:'研究',id:'347'},
]
//使用jquery库
var str1 = '';
$.each(data.newArr, function(i, item) {
console.log(item.value);
str1 += '<li>
<input type="checkbox" class="checkitem" value='这里获取id'/>
<div class='reviewed'>已审</div>
+data.newArr[i].name+
</li>';
$(".ui-listview").html(str1)
});
//全选
$(".checkall").change(function(){
console.log($(this).prop("checked"));//输出全选按钮的选中状态;
$(".ui-listview .checkitem").prop("checked", $(this).prop("checked"));
})
//多选
$(".checkitem").change(function() {
if ($(".checkitem:checked").length === $(".checkitem").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
})
//确定
$('#checkSubmit').on('click',function(){
var list=[];
var newlist=$('input[type="checkbox"]:checked');
newlist.each(function() {
list.push($(this).prop('value'));
})
var len=list.length;
if(len==0){
console.log('内容是空的不请求数据')
}else{
if(list.includes('on')){//去掉数组前面的'on'
var iscopycourseList=JSON.parse(JSON.stringify(list));
var newArr=iscopycourseList.slice(1);
console.log(newArr,'*全选数组----');
//全选ajax请求----
//全选提交后全部置灰 显示已审字段
$(".checkbox input[type='checkbox']").prop("disabled",true)
$(".ui-listview input[type='checkbox']").prop("disabled",true)
$('.reviewed').css('display','inline-block');
}else{
console.log(list,'*单个多选数组----');
//单选ajax请求----
//单选提交后置灰 显示已审字段
let dataList = []
$(".ui-listview [data-cacheval='false']").each(function (index, dom) {
dataList.push(dom.defaultValue)
dom.disabled = true;
})
$('.reviewed').each(function(index, dom) {
let val = $('.reviewed').eq(index)[0].attributes.value.value
if(dataList.includes(val)) {
dom.style.display = 'block'
}else{
dom.style.display = 'none'
}
})
}
}
}
记录一下,少走弯路!!!