Using a checkbox to disable all the input fields in a table row

Question

Following this answered question, I am attempting to have a checkbox at the end of each row of my table, which contains 2 text field inputs per row.

I would like the inputs to become "disabled" if the checkbox has been checked.

My HTML:

<table class="forecast">
    <tr>
      <th>Question</th>
      <th>Answer A</th>
      <th>Answer B</th>
      <th>Not applicable</th>
    </tr>
    <tr>
      <td>Quesiton 1</td>   
      <td>
        <input id="" name="q1a" value="" size="10" maxlength="10" />
      </td>
      <td>
        <input class="" title="" id="" name="q1b" value="" size="10" maxlength="10" />
      </td>
      <td >
        <input type="checkbox" id="" class="notused" name="" />
      </td>
    </tr>
    <tr>
      <td>Quesiton 2</td>   
      <td>
        <input id="" name="q2a" value="" size="10" maxlength="10" />
      </td>
      <td>
        <input class="" title="" id="" name="q2b" value="" size="10" maxlength="10" />
      </td>
      <td >
        <input type="checkbox" id="" class="notused" name="" />
      </td>
    </tr>
</table>

My attempted jQuery:

$('.notused').delegate(':checkbox', 'change', function() {
    $(this).closest('tr').find('input:text').attr('disabled', this.checked);
});
$(':checkbox').change();

Nothing happens when I check the box, there are no errors in my console. Any help would be appreciated thank you.

Arun P Johny · Accepted Answer · 2013-12-06 05:42:15Z

4

You need to use .prop() to set the checked property, Also prefer .on() to register event handlers

$('.forecast').on('change', ':checkbox', function () {
    var $inpts = $(this).closest('tr').find('input:text').prop('disabled', this.checked);
    if(this.checked){
        $inpts.val(0)
    }
}).find(':checkbox').change();

(Assuming you are using jQuery >= 1.7)

Demo: Fiddle

edited Dec 6, 2013 at 5:42

answered Dec 6, 2013 at 5:36

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

8 Comments

Gideon Over a year ago

Thank you, this works perfectly (yes, I'm on jQuery 1.9.1) I will accept this answer when the time runs out

Gideon Over a year ago

And may I ask, how could I also set the input values to 0 if it was checked?

Gideon Over a year ago

that doesn't seem to work (The edit) should the var have a $ for sure?

Arun P Johny Over a year ago

@Gideon checkout the fiddle... is it working for you? it is working for me

Gideon Over a year ago

yes the fiddle is - in chrome however I was getting an uncaught exception and the code was not showing var $inpts = but instead var = I removed the $ sign such that it was var inpts= and this is now working. Something strange?

|

Amit · Accepted Answer · 2013-12-06 05:38:53Z

0

Try this, Using Jquery 1.9.1

$(function(){
$('.forecast').delegate(':checkbox', 'change', function() {
    $(this).closest('tr').find('input:text').attr('disabled', this.checked);
});
});

Demo

Updated Demo with 0 value

answered Dec 6, 2013 at 5:38

Amit

15.4k8 gold badges49 silver badges69 bronze badges

Collectives™ on Stack Overflow

Using a checkbox to disable all the input fields in a table row

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related