溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

解決layui動態(tài)加載復(fù)選框無法選中的問題

發(fā)布時間：2020-09-13 16:40:03 來源：腳本之家 閱讀：563 作者：禮拜八 欄目：web開發(fā)

問題描述

1.最近用layui做后臺界面，遇到layui跟ajax數(shù)據(jù)動態(tài)加載的checkbox，偶爾不能正常勾選，取消

2.有分頁時，最后一頁數(shù)據(jù)過少會導(dǎo)致其他頁下方數(shù)據(jù)無法選中

3.頁面沒加載完或暴力測試時也會不能選中

利用layui更新渲染方法和網(wǎng)上的一些方法去解決后極大的減少了無法選中的情況，但是暴力測試時偶爾還會出現(xiàn)，實(shí)在不知道什么原因，所以就用了一個折中的方法——自己寫一個復(fù)選框

 <!--原有l(wèi)ayui復(fù)選框-->
<td>
  <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</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");
  }
}

全選或者選中其中幾個，獲取對應(yīng)id，刪除或進(jìn)行其他操作

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動態(tài)加載復(fù)選框無法選中的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手