原生jquery实现多选框提交按钮后的选中的状态禁用和添加字段实现方式?

效果图:
需求:
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'
						}
					})
			  }
      }
}

记录一下,少走弯路!!!

猜你喜欢

转载自blog.csdn.net/weixin_46409887/article/details/128130407