Unable to change the property of a checkbox to readOnly

Question

I have an HTML in which I have table, one column of table contains checkboxes and other contains text.

One checkbox is coming auto punched from the backend when the page loads. I want to make that checkbox readonly. below is the code I am using but its not working. pls suggest.

$(document).ready(function(){
  $('tr td').each(function(){
    $('this').find('input[type="checkbox"]:checked').prop('readOnly',true);
  });
});

Answer 1

Change this

$('this').find('input[type="checkbox"]:checked').prop('readOnly',true);

to this

$(this).find('input[type="checkbox"]:checked').attr('disabled','disabled'); 

Answer 2

Besides using a string for 'this' and the weird camel-casing (which doesn't really matter, both because the HTML isn't case-sensitive and also because jQuery fixes it to lowercase anyway) there's the simple fact that there's no such thing as a readonly checkbox. See for yourself (if you're interested why - simply put, READONLY prevents changing the field's value - and when clicking on a checkbox you're actually changing its state)

Instead, use disabled:

$(this).find('input[type="checkbox"]:checked').prop('disabled',true);

Answer 3

return false on click event...

Try this:

$('tr td').each(function(){
    $(this).find('input[type="checkbox"]:checked').on('click', function(){ return false });
});

::JsFiddle::

Answer 4

You can use to disable all checkboxes

 $('input[type="checkbox"]:checked').prop('disabled', "true");