How to disable row selection in ui-grid with row selection event?

Question

I have an ui-grid in my angular project. One of columns has a value once selected, I wish to grey out all other rows which doesn't share the same value of this column.

Here is content to display:

$scope.arr = [{id:'123', name:'Max', gender:'m'}, 
              {id:'456', name:'Bob', gender:'m'}, 
              {id:'789', name:'Ann', gender:'f'},
              {id:'012', name:'Amy', gender:'f'}];

when I select the first row "Max" for example, I wish to make rows of "Ann" and "Amy" to be disabled, and I can still select "Bob" and when I unselect all elements, all row should able to be selected again. Is it possible to do that？

I have this:

$scope.currentSelected;

$scope.gridOptions = {
multiSelect : true,
enableFullRowSelection: true,
columnDefs : [{name: 'id', displayName: 'ID'}, {name: 'name', displayName: 'Name'}, {name: 'gender', displayName: 'Gender'},],

onRegisterApi : function(gridApi){
  $scope.gridApi = gridApi;
  gridApi.selection.on.rowSelectionChanged($scope,function(row){
    /*
    logic of setting $scope.currentSelected
    */
  });
},
data : $scope.arr,
}