溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
問題描述
1.最近用layui做后臺界面，遇到layui跟ajax數據動態加載的checkbox，偶爾不能正常勾選，取消
2.有分頁時，最后一頁數據過少會導致其他頁下方數據無法選中
3.頁面沒加載完或暴力測試時也會不能選中
利用layui更新渲染方法和網上的一些方法去解決后極大的減少了無法選中的情況，但是暴力測試時偶爾還會出現，實在不知道什么原因，所以就用了一個折中的方法——自己寫一個復選框
<!--原有layui復選框-->
<td>
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon"></i></div>
</td>
<!--替換為自己寫的-->
<td>
<div a="off" class="checkBox" v-bind:data-id='x.Id' v-on:click="checkBox(i)">
<div></div>
</div>
</td>
自己寫的同樣支持vue綁定事件，并且支持單個選中、取消，全選和取消
//單個的選中取消
checkBox:function(n){
var checkbox = $('tbody tr').eq(n).find('.checkBox');
if (checkbox.attr("a") == "off") {
checkbox.children("div").css({
"display" : "block"
});
checkbox.attr("a","on");
}else {
checkbox.children("div").css({
"display" : "none"
});
checkbox.attr("a","off");
}
}
//全選取消
checkBoxAll:function(){
var obj = $('thead').find('.checkBox');
if ($(obj).attr("a") == "off") {
$('.checkBox div').css({"display" : "block"});
$('.checkBox').attr("a","on");
}else {
$('.checkBox div').css({"display" : "none"});
$('.checkBox').attr("a","off");
}
}
全選或者選中其中幾個，獲取對應id，刪除或進行其他操作
function getId() {
var obj = $("tbody .checkBox");
var arr='';
obj.each(function(index, el) {
if(obj.eq(index).attr("a") == "on"){
arr += obj.eq(index).attr('data-id')+ ','
}
});
return arr;
}
以上這篇解決layui動態加載復選框無法選中的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
