Question

I have a table with checkbox and a dropdown in each row. I’d like the dropdown input fields to be disabled on page load BUT became enabled when checkbox for that particular row is checked.

Can you help me with JQuery code which can do that?

<thead>
<tr>
<th>Box</th><th>No</th><th>No 1</th><th>No 2</th><th>No 3</th><th>No 4</th><th>Chosen</th><th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ID[]" value="341"/></td><td>1</td><td>1</td><td>5</td><td>13</td><td class='key'><select name="chosen_key">
<option value="1" selected="selected">N</option>
<option value="2">Y</option>
<option value="3">M</option>
<option value="4">A</option>
<option value="5">R</option>
</select></td><td>2011-01-28</td></tr>
<tr>
<td><input type="checkbox" name="ID[]" value="342"/></td><td>2</td><td>6</td><td>10</td><td>23</td><td class='key'><select name="chosen_key">
<option value="1">N</option>
<option value="2" selected="selected">Y</option>
<option value="3">M</option>
<option value="4">A</option>
<option value="5">R</option>
</select></td><td>2011-01-28</td></tr>
.
.
.
</tbody>

> Blockquote

Thank you for your help.

Answer 1

$(document).ready(function() {
  // Disable select elements
  $('select').each(function() {
     $(this).attr('disabled','true');
  });

  // Enable them on click
  $('input[type=checkbox]').click(function() {
     var s = $(this).parent('td').siblings('td.key').children('select');

     if(s.is(':disabled')) {
        s.removeAttr('disabled');   
     } else {
        s.attr('disabled','true');
     }
  });

});

You don’t really need the first part because you can set the initial disabled value in your HTML.