bootstrap-switch：記一次很坑的問題（連續相同狀態的多行數據只有第一個顯示按鈕，其他行沒有開關初始化）

先上截圖，第234行都是禁用狀態，但是只有第2行顯示了禁用開關，后面的都沒有開關初始化

檢查下代碼：

onLoadSuccess: function(data){
    {#獲取行數據的狀態#}
   console.log('渲染數據完成后，打印所有數據')
   console.log(data);

   var data=$("#mytab").bootstrapTable("getData");
   console.log('已獲取全部數據%s',data);

   for (var i=0;i<data.length;i++){
       console.log(data[i].project_code,data[i].status)
       if (data[i].status == 1){
           console.log('這個是開啟的')
           $('#project_status_switch_on').bootstrapSwitch({
               onText: "啟用",      // 設置ON文本  
               offText: "禁用",    // 設置OFF文本  
               onColor: "success",// 設置ON文本顏色(info/success/warning/danger/primary)  
               offColor: "danger",  // 設置OFF文本顏色 (info/success/warning/danger/primary)  
               size: "small",    // 設置控件大小,從小到大  (mini/small/normal/large)
           }).bootstrapSwitch('state',true)
       }else{
           console.log('這個是禁用的')
           $('#project_status_switch_off').bootstrapSwitch({
               onText: "啟用",      // 設置ON文本  
               offText: "禁用",    // 設置OFF文本  
               onColor: "success",// 設置ON文本顏色(info/success/warning/danger/primary)  
               offColor: "danger",  // 設置OFF文本顏色 (info/success/warning/danger/primary)  
               size: "small",    // 設置控件大小,從小到大  (mini/small/normal/large)
           }).bootstrapSwitch('state',false)
       }
   }
}

發現代碼：$('#project_status_switch_off').bootstrapSwitch()，是按照id=project_status_switch_off來渲染的，只要是有這個屬性的input框應該都能渲染才對啊。F12檢查下沒問題確實是這個屬性值，那為什么不能渲染呢？

將渲染開關定位元素方式修改為：$("[id='project_status_switch_off']").bootstrapSwitch(）

 

 完美解決。

后續分析：可能$('#project_status_switch_off')方式只能找到第一個匹配的元素，而$("[id='project_status_switch_off']")方式會將所有符合條件的元素全部匹配。