本文主要是介绍lay数据表格(table)的多选框限制单选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
@TOC
lay数据表格(table)的多选框限制单选
使用layui弹窗显示表格数据提供选择，最初使用单选框，选中后无法取消勾选，后该成多选框限制成单选，可点击已勾选复选框实现取消功能。
PS：easyui数据表格提供简单实现 多选框限制单选的功能
lay table radio未提供取消勾选功能
业务需要，只能选中数据表格中一条数据，最开始使用table中的radio实现
//弹窗显示
var oldUserIndex = admin.open({type: 1,area: ['700px'],title: '确定是否调整旧人员',url: ctx + '/human/userDept/chooseOldUser',success: function (vLayer, dIndex) {layer.full(oldUserIndex)//弹窗最大化/* 渲染直接上级表格 */var oldUserTb = table.render({elem: '#oldUser',where: {name: addUser.name, state: '旧'},page: {curr: 1},url: ctx + '/hm/user/pageList',height: 'full-230',cols: [[{type: 'numbers', fixed: 'left'},// {type: 'radio', fixed: 'left'},//radio方式，后无法实现取消勾选功能{type: 'checkbox', fixed: 'left'},//改走多选，前端框架支持取消勾选
layui table checkbox 复选框限制单选
最开始实现，看layui中文文档使用table 的回调函数 done中监听复选框，尝试未成功，改外置方法监听复选框成功。
// 表单事件监听---复选框限制单选--选中节点外的其他勾选节点都取消勾选table.on('checkbox(oldUser)', function(obj){//和表格elem
//数据表格所有勾选的多选框var oldUserIds = table.checkStatus('oldUser');var data = oldUserIds.data;var isChecked = obj.checked;//无法获取到该表格下拉框，--需要自己打印数据查看是否能获取var rowIndex = obj.data.LAY_TABLE_INDEX;// console.log("监听obj:" + JSON.stringify(obj)); //当前行的一些常用操作集合// // console.log(data.checked); //当前是否选中状态// // console.log(data.data); //选中行的相关数据// console.log("isChecked:" + isChecked); // 得到radio原始DOM对象// console.log("当前下标rowIndex:" + rowIndex); // 得到radio原始DOM对象// console.log("所有选中data:" + JSON.stringify(data)); // 得到radio原始DOM对象// // console.log("value55:" + data.value); // 被选中的值// console.log("obj,se:" + JSON.stringify(obj.tr.selector)); // 得到radio原始DOM对象//根据打印选中数据获取其表格下标--正则var selecor = JSON.stringify(obj.tr.selector);var regexp = /\d+/g;var s1 = regexp.exec(selecor);// console.log("s1:" + s1[0]);var regexp = /\d+/g;var s1 = regexp.exec(selecor);if(isChecked) {//以下是测试成功的实现取消其他勾选节点的渲染--上面注释的一堆都未测试通过，但百度的其他博主成功。$('input[type="checkbox"]').prop('checked', false);$('tr[data-index=' + s1[0] + '] input[type="checkbox"]').prop('checked', true);form.render('checkbox');//重新渲染多选框很重要，之前测试是渲染全表格都无效}});
补充-checkbox 实现单选需要禁止全选
]],done: function () {// 禁止全选/*禁止全选-添加禁用图标*/$('th[data-field="1"] input[type="checkbox"]').prop('disabled', true);}
相关参考文章
部分丢失-放个layui中文文档地址吧
http://layui.apixx.net/doc/modules/table.html
PS：注意变换搜索的关键字，期间一直百度不到需要的目标文档
并且思路要改变，最开始一直想通过实现取消勾选单选框实现该需求，后来弃了
换新思路才实现
这篇关于lay数据表格(table)的多选框限制单选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
