Question

我有一个表单，可以动态添加每行包含4个字段的行。像这样：

[姓名] [描述] [借记] [信用]

我想要实现的预期行为是用户只能将值输入到借方字段或仅输入到贷方字段，而不能输入两者。因此，当用户在Debit中输入值时，应禁用Credit字段并将其赋值为0或为空。反之亦然，当用户在Credit中输入值时，应禁用Debit字段并将其赋值为0或为空。这应该适用于用户添加的每一行。我怎么能做到这一点？

到目前为止，我一直在测试一些替代方案，但无法使其正常工作。这是我这部分的当前代码。它只会禁用字段，但不会清空或清零下一个或上一个字段：

<script type="text/javascript">
  var $n = jQuery.noConflict();
  $n('input[name^=debits]').live("focus", function(){  
    $n('input[name^=credits]').attr("readonly", "readonly");
    $n('input[name^=debits]').removeAttr("readonly");
  });

  $n('input[name^=credits]').live("focus", function(){
    $n('input[name^=debits]').attr("readonly", "readonly");
    $n('input[name^=credits]').removeAttr("readonly");
  });
</script>

感谢您提供任何线索。

Answer 1

如果您想“清空”某个字段，请在其上调用.val('')

Answer 2

var $n = jQuery.noConflict();
  $n('input[name^=debits]').live("focus", function(){  
    $n(this).next('input[name^=credits]').val('').attr("readonly", "readonly");
    $n(this).removeAttr("readonly");
  });
  $n('input[name^=credits]').live("focus", function(){
      $n(this).prev('input[name^=debits]').val('').attr("readonly", "readonly");
    $n(this).removeAttr("readonly");
  });

Answer 3

对标记没有太多了解我有这个解决方案。您可能必须根据标记更改选择器。

  var $n = jQuery.noConflict();
  $n('input[name^=debits]').live("focus", function(){  
      $n(this)
      .prop("disabled", false);
      .parent().find('input[name^=credits]')//Assuming it has parent container
      .prop("disabled", true)
      .val(0)
  });

  $n('input[name^=credits]').live("focus", function(){
      $n(this)
      .prop("disabled", false);
      .parent().find('input[name^=debits]')//Assuming it has parent container
      .prop("disabled", true)
      .val(0);
  });

注意：如果要使用同一行上的输入元素，则应使用this作为参考或上下文来查找同一行中的元素。您正在做的是使用所需的选择器查找页面上的所有元素。另外要禁用input框，您应该使用prop()方法将disabled属性设置为true，反之亦然，以启用它。

如果您使用的是jQuery ver 1.7+，那么最好使用on而不是live

Answer 4

就个人而言，我会为每个输入添加一个焦点处理程序，然后将所有其他输入值空白并禁用它们 - 如下所示：

$('table td input').focus(function(){
    // Blank all inputs first
    $(this).closest('tr').find('input').attr('disabled', 'disabled').val(0);

    // enable the focused field
    $(this).removeAttr('disabled');
});

如何选择当前输入字段然后禁用并清空下一个字段（反之亦然）？

4 个答案: