Disable editing on a cell. Only using javascript

[icytin]

For example disabling edit of column two and three:
$('#table').editableTableWidget({ editor: $(''), preventColumns: [ 2, 3 ] });

[ddykhoff]

Thanks for this, helped me with my project!

I made a couple changes on top of this:

remove the line
.css('cursor', 'pointer')

and add the following code immediately after the block that contained the removed line (so after the .keydown( ... );):

element.find('td').each(function(){
    if ($.inArray($(this).index() + 1, activeOptions.preventColumns) == -1) {
        $(this).css('cursor', 'pointer');
    }
});

This change makes it so the cursor doesn't show as a pointer (the pointing hand) on disabled cells.

[lupor0x]

thanks worked like a charm! :)

[nicholasrpb]

hi looks like this version is not yet merged back to the master? could help to update? i want to use this feature as well. Thanks!

[nicholasrpb]

Hi @ddykhoff

could send me your latest script? Now is not really clear whether is it being locked or not, because you can double click the cells but could not change the value. Really appreciate your help! Thanks!

[DRSDavidSoft]

I use the following syntax, please also add this to your next PR:

<tr>
	<td readonly> 123 </td>
</tr>

jQuery callback that I wrote:

$('td[readonly]').click(function(e) {
	e.preventDefault();
	e.stopPropagation();
});

[alexfulsome]

I like @DRDDavidSoft's solution but its worth noting that this will still allow editing on double-click, all other things being equal.

[DRSDavidSoft]

@alexfulsome This could be a potential fix for double-clicks:

$('td[readonly]').dblclick(function(e) {
	e.preventDefault();
	e.stopPropagation();
});

... or combining them:

$('td[readonly]').on('click dblclick', function(e) {
	e.preventDefault();
	e.stopPropagation();
});

[WilliSchmidt]

you still can press the control key to change the value

$('td[readonly]').on('click dblclick keydown', function (e) { e.preventDefault(); e.stopPropagation(); });