Enable disable HTML table element with JQuery in disabled <TR>

Question

I am creating a dynamic HTML table with JQuery. Sample code is below.

var tbody=$("#myTable tbody");

var tableRow;

if(somevariableIsTrue)
   tableRow=$("<tr>").attr("disabled",true);
else
   tableRow=$("<tr>");

var td=$("<td>");
    td.appendTo(tableRow);

var tdn=#("<td>");
tdn.appendTo(tableRow);

 tableRow.appendTo(tbody);

now I create different TDs and append to the tableRow. If the disabled attribute of the row is TRUE obviously all the TDs for that row will be disabled too. But I want that my first TD of disabled row shouldn NOT be disabled as its a checkbox column on its click I want to enable/disable the same row. I tried different ways to get the checkbox in the first column and tried to enable it but all fails. Can some one suggest me how to do this in JQuery

EDIT Hope this screen shot helps to understand my requirement enter image description here

as seen in the image first row is disabled including the first td with checkbox. I want to checkbox column to be enabled all the time so that on checking it the row becomes enabled and un checking leaves the row disabled again.

The tr element doesn't have a disabled attribute. If you want to disable the inputs within that tr, you need to add the attribute to all of them individually. — Rory McCrossan
– Rory McCrossan, Commented Sep 11, 2014 at 8:41
Well it works with tr and disables all the other elements in that tr as required. I do not want to iterate each td to enable disable the elements so I chose this method. — V.B
– V.B, Commented Sep 11, 2014 at 8:43
@V.B you claim disabled works on <tr>. Beware this does not work on modern browsers. I suppose you're using an old version of IE. Instead you should disable the form elements that are children of that table row. — Greg
– Greg, Commented Sep 11, 2014 at 9:16

DDan · Accepted Answer · 2016-05-11 01:38:04Z

1

Here is a simple solution:

// first row checkboxes
$('tr td:first-child input[type="checkbox"]').click( function() {
   //enable/disable all except checkboxes, based on the row is checked or not
   $(this).closest('tr').find(":input:not(:first)").attr('disabled', !this.checked);
});

See it working in this JSFiddle

answered May 11, 2016 at 1:38

DDan

8,3566 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

showdev · Accepted Answer · 2016-08-10 00:01:51Z

1

You could just call

$('input[type=checkbox]').removeAttr('disabled');

or

$('input[type=checkbox]').prop('disabled', false);

on all your checkboxes. This would essentially re-enable all of your checkboxes

edited Aug 10, 2016 at 0:01

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Sep 15, 2014 at 19:38

Rich

3012 silver badges6 bronze badges

Collectives™ on Stack Overflow

Enable disable HTML table element with JQuery in disabled <TR>

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related