layui监听多个复选框是否被选中（根据选中状态改变按钮状态）

效果示例

 

1.html代码块

<form class="layui-form" action="">
   	<div class="layui-form-item">
		<div class="layui-input-block checkbox-container">
			<input lay-filter="checkboxs" type="checkbox" value="9" title="12345" lay-skin="primary" >
			<input lay-filter="checkboxs" type="checkbox" value="10" title="123456" lay-skin="primary" >
			<input lay-filter="checkboxs" type="checkbox" value="11" title="1234567" lay-skin="primary" >
			<input lay-filter="checkboxs" type="checkbox" value="12" title="12345678" lay-skin="primary" >
		</div>
	</div>
</form>
<button id="del" class="layui-btn layui-btn-primary layui-btn-xs layui-btn-disabled">删除所选设备</button>

 2.js代码块

layui.use(['form','jquery'],function(){
	var  $ = layui.jquery
	, form = layui.form
	,checkBoxArr = new Array();
	
	form.on('checkbox(checkboxs)', function(data){
		//选中状态下改变按钮为可点击状态
		if(data.elem.checked){
			$('#del').removeClass('layui-btn-disabled');
			checkBoxArr.push(data.elem.value);
			
		}else if(!data.elem.checked){
		//取消选中时检查是否还有其他复选框被选中，所有复选框都没选中状态则改变按钮为禁用状态
			 $.each(checkBoxArr,function(i,a){
		    	 if(a == data.elem.value){
		    		 checkBoxArr.splice(i,1);
		    	 }
		     });
			if(checkBoxArr.length < 1){
				$('#del').addClass('layui-btn-disabled');
			}
		}
		//console.log(data.elem); //得到checkbox原始DOM对象
		//console.log(data.elem.checked); //是否被选中，true或者false
		//console.log(data.value); //复选框value值，也可以通过data.elem.value得到
		//console.log(data.othis); //得到美化后的DOM对象
	});
	
});