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

更新時(shí)間：2019年09月20日 16:37:17 作者：禮拜八

今天小編就為大家分享一篇解決layui動態(tài)加載復(fù)選框無法選中的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題描述

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

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

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

利用layui更新渲染方法和網(wǎng)上的一些方法去解決后極大的減少了無法選中的情況，但是暴力測試時(shí)偶爾還會出現(xiàn)，實(shí)在不知道什么原因，所以就用了一個(gè)折中的方法——自己寫一個(gè)復(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綁定事件，并且支持單個(gè)選中、取消，全選和取消

//單個(gè)的選中取消 

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");
  }
}

全選或者選中其中幾個(gè)，獲取對應(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)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: