Question

我想克隆/复制每列第一个输入的输入到相同类/ id的子框中。

例如，有5列数据。每列都有自己的类和特定ID。一旦我开始在每列的顶部输入上键入并选中复选框。该列的以下/子输入开始键入相同的笔划。

JS

var $input1 = $(document).find('input[id^="box"]').filter(':visible:first'); //find the first input begins with *box or other same id???
$($input1).keypress(function() { //duplicate the first box typing
  var $this = $(this);
  window.setTimeout(function() { //delay a bit
    if ($('#cloneAll').is(':checked')) { //if checkbox empty
      $('*[id^="box"]').val($this.val()).attr('readonly', true); //clone all inputs and set them readonly
    }
  }, 0);
});

HTML

 1.<input type="text" value="" id="box1" /><label><input type="checkbox" id="cloneAll" />clone all</label>
<br /> 2.<input type="text" value="" id="box2" />
<br /> 3.<input type="text" value="" id="box3" />
<br /> 4.<input type="text" value="" id="box4" />
<br /> 5.<input type="text" value="" id="box5" />
<br /> .
<br /> .
<br /> .
<br /> 100.<input type="text" value="" id="box100" /><br />

问题是：

如何找到每组class / id的第一个输入并将其设置为原型？
如果选中复选框，如何继续输入以下输入而不会卡住？

Fiddle或

＆＃13;

var $input1 = $(document).find('input[id^="box"]').filter(':visible:first'); //find the first input begins with *box or other same id???
$($input1).keypress(function() { //duplicate the first box typing
  var $this = $(this);
  window.setTimeout(function() { //delay a bit
    if ($('#cloneAll').is(':checked')) { //if checkbox empty
      $('*[id^="box"]').val($this.val()).attr('readonly', true); //clone all inputs and set them readonly
    }
  }, 0);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1.
<input type="text" value="" id="box1" />
<label>
  <input type="checkbox" id="cloneAll" />clone all</label>
<br /> 2.
<input type="text" value="" id="box2" />
<br /> 3.
<input type="text" value="" id="box3" />
<br /> 4.
<input type="text" value="" id="box4" />
<br /> 5.
<input type="text" value="" id="box5" />
<br /> .
<br /> .
<br /> .
<br /> 100.
<input type="text" value="" id="box100" />
<br />

＆＃13;

Answer 1

您的代码中的这一行将输入框的全部设置为只读，并阻止您输入第一个框。

$('*[id^="box"]').val($this.val()).attr('readonly', true); //clone all inputs and set them readonly

如果你在它下面添加这一行，它将允许你继续在第一个框中输入。

$input1.attr('readonly', false);

更新小提琴： http://jsfiddle.net/be9br09j/2/

更新了代码段

＆＃13;

var $input1 = $(document).find('input[id^="box"]').filter(':visible:first'); //find the first input begins with *box or other same id???
$($input1).keypress(function() { //duplicate the first box typing
  var $this = $(this);
  window.setTimeout(function() { //delay a bit
    if ($('#cloneAll').is(':checked')) { //if checkbox empty
      $('*[id^="box"]').val($this.val()).attr('readonly', true); //clone all inputs and set them readonly
      $input1.attr('readonly', false);
    }
  }, 0);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1.
<input type="text" value="" id="box1" />
<label>
  <input type="checkbox" id="cloneAll" />clone all</label>
<br /> 2.
<input type="text" value="" id="box2" />
<br /> 3.
<input type="text" value="" id="box3" />
<br /> 4.
<input type="text" value="" id="box4" />
<br /> 5.
<input type="text" value="" id="box5" />
<br /> .
<br /> .
<br /> .
<br /> 100.
<input type="text" value="" id="box100" />
<br />

＆＃13;

如何使用jquery on复选框从第一个框中的每个输入克隆输入复选框？

1 个答案: