Disable click anywhere except one cell (in the selected row) when a cell enters the edit mode

Question

How do I disable click on all grid cells except one cell in a row? I am trying to disable clicks on any cell in the grid, when a cell enters the edit mode. So I tried:

$('#QCStatus tr td').bind('click',function() {
        return false;
});

//QCStatus is the id of the grid

To enable click on a cell, in the same row that is being edited, I tried:

$('#QCStatus tr.selected-row td[aria-describedby="QCStatus_ActionIcons"]').bind('click',function() {
        return true;
});

But this doesn't have any effect as click is disabled by the first snippet. What is the correct way to achieve this?

Answer 1

You can exclude the selected row it with :not() here:

 $('#QCStatus tr:not(.selected) td').on('click', function(e) { $('pre').prepend('event :::: '+e.type+'\\n'); return false; }); 

 .selected{background:yellow;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id='QCStatus'> <tr><td>click</td></tr> <tr class='selected'><td>click</td></tr> <tr><td>click</td></tr> <tr><td>click</td></tr> </table> <pre></pre> 

This will bind the click on all the td s which are not the children of tr.selected .

---

As per your comment you can add more:

How could I just exclude the td in the selected row td[aria-describedby="QCStatus_ActionIcons"] ?

$('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])').on('click', function(e) {
  $('pre').prepend('event :::: '+e.type+'\n');
  return false;
});

Answer 2

Use event.stoppropagation() for element to be eliminated for click event. It prevents further propagation of the current event.

 $('tr').on('click', function() { console.log('clicked!'); }); $('.disabled').on('click', function(e) { e.stopPropagation(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table border="1"> <tr> <td>Hello</td> <td class="disabled">Disabled</td> </tr> <tr> <td>Hello</td> <td class="disabled">Disabled</td> </tr> <tr> <td>Hello</td> <td class="disabled">Disabled</td> </tr> </table> 

Fiddle here

Answer 3

add a "disabled" attribute to those buttons where you want to disable the click.

for a div disabled attribute doesn't work.

in those cases use "pointer-events:none;" in your css of that particular divs.