Question

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

我有一个动态生成的4列表。我编写了代码，当你点击它时，最小和最大列（第2和第3列）是可编辑的。第4列，＆＃34;主要区域＆＃ 34;是一列复选框。

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

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

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

1 个答案: