При щелчке флажка отключить строку для редактирования -Jquery, Jeditable, Datatable

Question

Я использую Jquery, Jeditable и Datatables в своем проекте.

У меня есть таблица с 4 столбцами, которые динамически сгенерированы. Я написал код, чтобы столбцы Min и max (2nd и 3rd col) редактировались, когда вы нажимаете на него. Четвертый столбец «Основной регион» - это столбец флажка.

Мое требование, когда флажок установлен Я хочу сделать соответствующие min и max в строке, не редактируемой.

Вот мой HTML

<table id="places" class="display" cellspacing="0" width="50%" > 
    <thead> 
     <tr> 
      <th>Places</th> 
      <th>Min Score</th> 
      <th>Max Score</th> 
      <th>Main Region</th> 
     </tr>       
    </thead> 
    <tbody>         
     <% i=0 %> 
     <% for scores_place in socres_array %>             
     <tr> 
      <td class="readonly" align="center"><%= scores_place.at(0) %></td> 
      <td align="center" class="min"><%= min.at(i) %></td> 
      <td align="center" class="max"><%= max.at(i) %></td>    
      <td align='center' class='readonly'><input type='checkbox' class='place_checkbox'></td>    
      <% i=i+1 %> 
     </tr> 
     <% end %> 
    </tbody>        
</table> 

Вот мой JQuery, который не работает, как ожидалось.

$(document).ready(function() { 

    var oTable=$('#places').dataTable({     
    }); 

    //call back function to make min and max editable on click of table cell. 

    var theCallback = function(v, s) { 
     return v; 
    }; 

    $(oTable).find('td:not(.readonly)').editable(theCallback, { 
     "callback": function(sValue, y) { 
      var aPos = oTable.fnGetPosition(this); 
      oTable.fnUpdate(sValue, aPos[0], aPos[1]); 
     }, 
     "height": "18px", 
     "width": "100%" 
    }); 


    //This is not working as expected because of the call back function written above 
    $('.place_checkbox').change(function(){ 

     var row = $(this).closest('tr'); 
     if($(this).is(':checked')) 
     {   
      $(row).find('.min,.max').prop("disabled",true);  

     } 
     else 
     { 
      $(row).find('.min,.max').prop("disabled",false);  
     } 
    }) 
    }); 

Answer 1

Попробуйте

$(row).find('.min,.max').editable("disable"); 
$(row).find('.min,.max').editable("enable");