jQuery根据第一个输入的文本框值填充数组命名的表单字段

jQuery to populate array-named form fields based on first entered text box value

本文关键字：数组 填充 字段 表单 第一个 输入 文本 jQuery      更新时间：2023-09-26

我有一个输入数量可变的表单作为数组

<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>

这个想法是，当我在第一个字段（foo[1]）中放入一些值时，我需要jQuery或Javascript根据数组将值从#foo[1]复制到#foo[2]、#foo[3]等中。

您需要以下行为吗：

$(document).ready(function(){
  
  $("input[id^=foo''[]").prop("disabled",true); //disable all elements first
  $("input#foo''[1'']").prop("disabled",false); //then enable the first one 
  
  $("input#foo''[1'']").change(function(){
    var source = $(this);
    var currentVal = $(source).val();
    $("input[id^=foo''[]").each(function(){
      if(!$(this).is(source))
        $(this).val(currentVal);
    });
  });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>

$('input').on('input', function(){
    $(this).siblings().val($(this).val());
});

不知道你只是想要第一个还是全部。如果只是第一个，您可以使用id或jQuery作为目标。

$('input').eq(0).on('input', function(){});

类似的东西

HTML

<form>
    <label for="same">all the same as first?</label>
    <input type="text" id="foo[1]" name="foo[1]" value="" />
    <input type="text" id="foo[2]" name="foo[2]" value="" />
    <input type="text" id="foo[3]" name="foo[3]" value="" />
    <input type="text" id="foo[4]" name="foo[4]" value="" />
    <input type="text" id="foo[5]" name="foo[5]" value="" />
</form>

JavaScript

$("input[id=foo''[1'']").on("input", function (){
   $(this).siblings().val($(this).val());
});

如果你想让另一个只读：

$("input[id^=foo''[]:not([id=foo''[1'']])").attr("readonly", "readonly");
相关文章：