Enable/Disable textboxes using checkbox inside the table

Question

Help me. I have problem with the code:

I have this script:

<script>
$('td input[type="checkbox"]').onclick(function () {
  $(this).closest('tr').find('input[type="text"]').prop('disable', !this.checked);
}).change();
</script>

And the table:

       <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>#</th>
                                    <th>Activity Name</th>
                                    <th>SkillsID</th>
                                    <th>Percentage</th>
                                    <th><center>Time Estimate Overhead (min)</center>                             </th>
                                    <th><center>Time Estimate Per Unit (min)</center></th>
                                    <th><center>Total Time (min)</center></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>    
                                    <td><input type="checkbox" class="others1">
                                    <td>1</td>
                                    <td>Preparation</td>
                                    <td class="center">1,7,8</td>
                                    <td class="center"></td>
                                    <td class="center"><input type="text" id="cb1_teo_text" name="cb1_teo_text" style="width: 100%;" disabled=""></td>
                                    <td class="center"><input type="text" id="cb1_tep_text" name="cb1_tep_text" style="width: 100%;" disabled=""></td>
                                    <td class="center"><span id="totaTime1"/></td>

                                </tr>
                                <tr>
                                <td><input type="checkbox" name="others2"></td>
                                <td>2</td>
                                <td>Review of Materials</td>
                                <td class="center">1,7,8</td>
                                <td class="center"></td>
                                <td class="center"><input type="text" name="cb2_teo_text" style="width: 100%;" disabled=""></td>
                                <td class="center"><input type="text" name="cb2_tep_text" style="width: 100%;" disabled=""></td>
                                <td class="center"></td>
                            </tr>
    </tbody>
    </table>

I just want to enable the preceding with two when the checkbox is checked and disable when the checkbox is unchecked.

At first the textboxes are disable but when the checkbox is checked it should be enable. Thank you. — user987654321
– user987654321, Commented Feb 21, 2014 at 1:11

Ken Herbert · Accepted Answer · 2014-02-21 02:09:54Z

1

There is no .onclick() event binding in jQuery - it is .click(), also the property name to enable and disable elements is disabled not disable. You also need to wrap the binding in a $(document).ready() block so the Javascript isn't trying to bind the event to an element that doesn't exist yet.

These changes to your code are all that are needed to make it work.

$(document).ready()
{
    $('td input[type="checkbox"]').click(function () {
        $(this).closest('tr').find('input[type="text"]').prop('disabled', !this.checked);
    }).change();
});

Here is a working jsFiddle showing the changes.

edited Feb 21, 2014 at 2:09

answered Feb 21, 2014 at 1:10

Ken Herbert

5,2465 gold badges31 silver badges38 bronze badges

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

6 Comments

Ken Herbert Over a year ago

@user3326074 I've updated my answer with what I assume will fix the problem, since you didn't actually show any more code.

user987654321 Over a year ago

I'm sorry. I already figure out the problem. Thanks again.:) Can you help me with the another problem.

Ken Herbert Over a year ago

If my answer was correct please mark it as accepted. If my answer wasn't correct please create your own answer and mark it as accepted. If you have another question then please post it as a new question instead of discussing it here.

user987654321 Over a year ago

this is the link: stackoverflow.com/questions/21923841/… for another question.

Ken Herbert Over a year ago

OK, you've already asked it. I will undo the changes you've made here.

|

Collectives™ on Stack Overflow

Enable/Disable textboxes using checkbox inside the table

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related