html - How to enable or disable specific textboxes according to the selected option -

html - How to enable or disable specific textboxes according to the selected option -

when select lock menu, want disable text fields in row except first text field prevent text input. when select unlock allow text entry in fields.

html

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>not lock</td> <td>lock/unlock</td> <td>lock/unlock</td> <td>lock/unlock</td> </tr> <tr> <td>1</td> <td><select name="select" id="select"> <option value="0"></option> <option value="1" selected>lock</option> <option value="2">unlock</option> </select></td> <td><input name="textfield" type="text" id="textfield" value="1" /></td> <td><input name="textfield" type="text" id="textfield" value="1" /></td> <td><input name="textfield" type="text" id="textfield" value="1" /></td> <td><input name="textfield" type="text" id="textfield" value="1" /></td> </tr> <tr> <td>1</td> <td><select name="select" id="select"> <option value="0"></option> <option value="1" selected>lock</option> <option value="2">unlock</option> </select></td> <td><input name="textfield" type="text" id="textfield" value="1" /></td> <td><input name="textfield" type="text" id="textfield" value="1" /></td> <td><input name="textfield" type="text" id="textfield" value="1" /></td> <td><input name="textfield" type="text" id="textfield" value="1" /></td> </tr> </table>

jsfiddle:

http://jsfiddle.net/e8ns7/2

added div on top class="row"

changed textboxes id class since of them using it.

$(document).ready(function () { $('.row').each(function () { var $dropdown = $(this).find('#select'), $textfield = $(this).find('.textfield'); $dropdown.change(function () { if ($dropdown.val() != '1') { $textfield.removeattr('disabled'); } else { $textfield.attr('disabled', 'disabled').val(''); } }).trigger('change'); // added trigger calculate initial state }); });

html css