javascript - 单击复选框时，禁用行编辑 -Jquery、Jeditable、Datatable

Question

我在我的项目中使用 Jquery、Jeditable 和 Datatables。

我有一个动态生成的 4 列表格。我编写了代码，当您单击它时，最小和最大列(第二列和第三列)是可编辑的。第四列“主要区域”是一列复选框。

我的要求是，当选中该复选框时，我想使该行中相应的最小值和最大值不可编辑。

这是我的 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");