別の行からボタンをクリックした後、jqueryを使用して他の行を自動的に無効にする方法はありますか？

Question

テーブルの各テーブル行には、編集ボタンがあるテーブルデータが含まれています。ユーザーが別の行の編集ボタンをクリックすると、有効になっているテーブル行を無効にする必要があります。次に、最近クリックした編集ボタンの行が有効になります。

HTML: 

<table> 
    <tr> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="submit" name="edit" id="editBtn" class="edit"></td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><span class="edit">Edit</span></td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="submit" name="edit" id="editBtn" class="edit"></td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="checkbox" disabled></td> 
    <td><input type="submit" name="edit" id="editBtn" class="edit"></td> 
    </tr> 
</table> 

    JQUERY: 
    $(function() { 
     $("table").on("click", ".edit", function() { 
      $(this).removeClass('edit'); 
      $(this).addClass('removeEdit'); 
      $(this).parents('tr').find('input[type=checkbox]').prop('disabled', false); 
      }); 

     $("table").on("click", ".removeEdit", function() { 
      $(this).removeClass('removeEdit'); 
      $(this).addClass('edit'); 
      $(this).parents('tr').find('input[type=checkbox]').prop('disabled', true); 
      }); 

Answer 1

UPDATED

jsfiddle

$(function() { 
    $("table").on("click", ".edit", function() { 
     $('table td').removeClass('removeEdit'); 
     $('table td').addClass('edit'); 
     $('table tr').find('input[type=checkbox]').prop('disabled', true); 
     $(this).removeClass('edit'); 
     $(this).addClass('removeEdit'); 
     $(this).parents('tr').find('input[type=checkbox]').prop('disabled', false); 
    }); 

    $("table").on("click", ".removeEdit", function() { 
     $(this).removeClass('removeEdit'); 
     $(this).addClass('edit'); 
     $(this).parents('tr').find('input[type=checkbox]').prop('disabled', true); 
    }); 

}); 

Answer 2

$(function() { 
 
    $("table").on("click", ".edit", function() { 
 
    
 
    var self =$(this).closest('tr').find('input[type=checkbox]'); 
 
    
 
    $("table tr").find('input[type=checkbox]').not(self).prop('disabled',true); 
 
    
 
     self.each(function(){ 
 
     $(this).prop('disabled', !$(this).prop('disabled')); 
 
    }); 
 
    
 
    
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="submit" name="edit" value ="Edit" id="editBtn" class="edit"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="submit" name="edit" value ="Edit" id="editBtn" class="edit"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="submit" name="edit" value ="Edit" id="editBtn" class="edit" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" disabled> 
 
    </td> 
 
    <td> 
 
     <input type="submit" name="edit" value ="Edit" id="editBtn" class="edit"> 
 
    </td> 
 
    </tr> 
 
</table>