CODEWITHSUNDEEP
jqueryhtmlcheckbox
Gideon
Gideon

Reputation: 1886

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

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.

Upvotes: 0

Views: 3513

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 4

Amit
Amit

Reputation: 15387

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

Upvotes: 0

Related Questions