Question

当我从菜单中选择Lock时，我想要禁用该行中除第一个文本字段以外的所有文本字段以防止任何文本输入。当我在所有字段中选择Unlock允许文本输入时。

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>

Answer 1

如果使用jquery不是问题

$('select').change(function () {
 if ($(this).val() == '1') {
    $(this).closest('tr').find('input:not(:first)').attr('disabled', 'disabled').val('');
 } else if ($(this).val() != '1') {
    $(this).closest('tr').find('input').removeAttr('disabled');
 }
}).trigger('change');

JSFiddle

Answer 2

的jsfiddle：

http://jsfiddle.net/e8nS7/2

在div

的顶部添加了class="row"

将文本框ID更改为class，因为他们都在使用它。

$(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 to calculate initial state
    });
});

如何根据所选选项启用或禁用特定文本框

2 个答案: