How to disable checkbox in a specific table row after clicking a button using javascript?

Question

I already have a code that works in disabling enabling elements after clicking a button. However, disabling a checkbox using addClass("disabled") is not working. How would I do that? Please take a look with my code below. Thanks a lot.

td:nth-child(3) and td:nth-child(4) is working fine but td:nth-child(1) checkbox disable is not working.

 $(document).on('click', '.generate', function(e){

        e.preventDefault();

          var $row = $(this).closest("tr"),

              $tds1 = $row.find("td:nth-child(1) input[type=checkbox].loan-id-checkbox").addClass("disabled");

              $tds3 = $row.find("td:nth-child(3) a.generate").addClass("disabled");
              $tds4 = $row.find("td:nth-child(4) a.btn-showAmort").removeClass("disabled");

      });

Answer 1

To disable a checkbox use the attribute disabled . The css class will not have an effect.

$tds1 = $row.find("td:nth-child(1) input[type=checkbox].loan-id-checkbox").attr("disabled", true);

Answer 2

You don't just need to addClass for checkbox you need to set attribute to true for disabling the checkbox like this.

 $row.find("td:nth-child(1) input[type=checkbox].loan-id-checkbox").addClass("disabled", true);
 OR
 $row.find("td:nth-child(1) input[type=checkbox].loan-id-checkbox").addClass("disabled",false)