Add checkbox dynamically

Question

how to make the checkbox on the table can be checked? I've the code below to add the checkbox dynamically by using a jquery function. The code below succeed to add the checkbox dynamically, but the problem is the checkbox added by the function can't be checked (disabled).

<table id="detail">
  <tr>
    <td><input type="checkbox" id="cb" name="cb[]"></td>
  </tr>
</table>

This is the button to add the row:

<input type="button" id="addRow" value="ADD ROW" />

And this is the jquery function I have:

<script type="text/javascript">
  $(document).ready(function() {
    $("#addRow").click(function() {
      $('#detail tbody>tr:last').clone(true).insertAfter('#detail tbody>tr:last');
    });
  });
</script>

Anyone can help for the code? Thanks... :)

Do you want the checkbox added be disabled ??

Sushanth --
– Sushanth --

2012-09-21 05:40:08 +00:00
Commented Sep 21, 2012 at 5:40 — Sushanth --
– Sushanth --, Commented Sep 21, 2012 at 5:40

Snake Eyes · Accepted Answer · 2012-09-21 05:41:44Z

3

Please first correct the javascript function !

  $(document).ready(function() {
    $("#addRow").click(function() {
      $('#detail tbody>tr:last').clone(true).insertAfter('#detail tbody>tr:last');
    });
  });

And your code works for me means the checkbox is checked (only if you tick last checkbox then your code will clone it)

See my jsfiddle or jsfiddle updated

answered Sep 21, 2012 at 5:41

Snake Eyes

16.8k39 gold badges120 silver badges235 bronze badges

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

3 Comments

mrjimoy_05 Over a year ago

Hi thanks for the code. It works! But who should I set the answer? Your answer is the same with @Sushanthreddy but Sushanthreddy is earlier to post the answer.

Snake Eyes Over a year ago

I corrected your JS code but to solve your problem I posted only jsfiddle (and an update).

Snake Eyes Over a year ago

Doesn't matter who post first ! the important is the quality of answer.

Sushanth -- · Accepted Answer · 2012-09-21 05:44:07Z

2

Try this

 $(document).ready(function() {
    $("#addRow").click(function() {
      $('#detail tbody tr:last').clone(true).insertAfter('#detail tbody tr:last');
    });
  });

check FIDDLE

answered Sep 21, 2012 at 5:44

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

Sender · Accepted Answer · 2012-09-21 05:46:03Z

0

 $("#addRow").click(function() {
     var row = $('#detail tbody>tr:last').clone(true);

     // Clear last value
     row.find("input:checkbox").attr('checked', false);

     // Change name attr
     row.find("#cb").attr('name', 'newNmae');

     //disabled set as a true
     row.find("input:checkbox").attr('disabled', true);

     row.insertAfter('#detail tbody>tr:last');
});

edited Sep 21, 2012 at 5:46

answered Sep 21, 2012 at 5:40

Sender

6,90813 gold badges50 silver badges69 bronze badges

Collectives™ on Stack Overflow

Add checkbox dynamically

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related