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

Question

我有一个包含可变数量输入的数组

<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] 等。

Answer 1

您是否需要以下行为:

$(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>