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

【问题标题】：How to select current input field and then disable and empty the next one (and vice versa)?如何选择当前输入字段，然后禁用并清空下一个（反之亦然）？
【发布时间】：2012-03-02 15:15:07
【问题描述】：

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

[姓名] [描述] [借方] [贷方]

我试图实现的预期行为是用户只能在借方字段或贷方字段中输入值，但不能同时向两者输入值。因此，当用户在借方输入值时，应禁用贷方字段并分配值 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>

感谢您提供任何线索。

【问题讨论】：

你可以在 jQuery 中依赖 .next() 和 .previous() 吗？
你能举个例子吗？尝试使用 $n('input[name^=debits]').next().val('');和 $n('input[name^=credits]').prev().val('');没有运气。
能否请您粘贴您的 HTML 并将其粘贴到 jsfiddle 中？然后我们可以看到结构，如果 .next() / .previous() 可以工作，谢谢！

标签： javascript forms jquery jquery-plugins

【解决方案1】：

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");
  });

【讨论】：

试过了，但仍然无法正常工作。有什么建议？使用 jQuery 1.6.2。 Here's the code。尽我所能清理样式并向您展示相关部分。请记住，此页面还对其他字段使用自动完成功能，对所有借记和贷记行求和，并使用 mootools 加载行。
你能解释一下这段代码的问题吗？因为此代码正在清除小提琴中测试的字段。
当有几行时，它会清除所有行中的值。它应该在每行的基础上工作。 Here is the code
谢谢！现在它起作用了！一开始它不起作用，但后来我意识到使用表格时，所有输入字段必须在同一个内。因此，此代码在使用时有效，而在使用时无效

【解决方案2】：

如果你想“清空”一个字段，你应该在上面调用.val('')

【讨论】：

你能给我举个例子吗？此外，当多行具有相同的字段名称时，.val('') 适用于所有行。
你会在 Abhijeet Pawar 的答案中找到一个例子

【解决方案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 1.7+ 版本，那么最好使用 on 而不是 live

【讨论】：

【解决方案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');
});

【讨论】：