Question

我有问题。我可以动态创建多行。每行有2 <td>。每个<td>都有一个类tdDebit和tdCredit。

<table id="tblAcctForm">
 <tr>
  <td class="tdDebit"><input type="text" /></td>
  <td class="tdCredit"><input type="text" /></td>
 </tr>
</table>

我想要发生的是当我在<td>内输入tdDebit或tdCredit类的输入时，同一行上的其他输入将被禁用。会发生的情况是，当我在<td>内的输入中使用类tdDebit或tdCredit输入内容时，所有输入都被禁用。我只想输入我输入的同一行。

$(document).ready(function () {
  $("tr .tdDebit input").live("keyup", function()  {
    checkContent(this, "tr .tdCredit input");
  });

  $("tr .tdCredit input").live("keyup", function()  {
    checkContent(this, "tr .tdDebit input");
  });
});

function checkContent (activeElem, otherElem) {
  if ($.trim($(activeElem).val()) != "")
    $(otherElem).attr("disabled", "disabled");
   else
    $(otherElem).removeAttr("disabled");
}

请在此处查看我的工作代码：http://jsfiddle.net/pcmwg/

PS：在测试之前创建多行。

请帮忙。提前谢谢。

Answer 1

您传递给otherElem参数的值太笼统：它会选择页面上所有tr内所有.tdDebit / .tdCredit内的所有输入。

相反，将相对于输入元素的直接值传递给它：

$(document).ready(function () {
  $("tr .tdDebit input").live("keyup", function()  {
    var toDisable = $(this).closest('tr').find('.tdCredit input');
    checkContent(this, toDisable);
  });

  $("tr .tdCredit input").live("keyup", function()  {
    var toDisable = $(this).closest('tr').find('.tdDebit input');
    checkContent(this, toDisable);
  });
});

更好的是，让它更通用：

$(document).ready(function () {
    $("tr input").live("keyup", function()  {
    var toDisable = $(this).closest('tr').find('input').not(this);
    checkContent(this, toDisable);
  });
});

http://jsfiddle.net/7jdfM/1/

Answer 2

checkContent(this, $(this).siblings(".tdCredit input"));
checkContent(this, $(this).siblings(".tdDebit input"));

Answer 3

这样做......不再需要第二个参数

function checkContent (activeElem, otherElem) {
    var $input=$(activeElem), $otherInput=$input.parent().next().find('input');
        if ($.trim($input.val()) != "")
            $otherInput.attr("disabled", "disabled");
        else
           $otherInput.removeAttr("disabled");
}

样本：HTTP：//jsfiddle.net/pcmwg/1/

jquery - 如何选择特定的表行

3 个答案: