如何克隆键入从第一个盒子与jquery复选框的每个输入检查？ [英] How to clone typing to every input from the first box with jquery on checkbox checked?

问题描述

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

例如，重新5列数据。每列都有其自己的类和特定的ID。一旦我开始在每列的顶部输入上打字并且复选框被选中。

$ b

JS

  var $ input1 = $（document）.find（'input [id ^ =box]'）。filter（'：visible：first'）; //找到第一个输入以* box或其他相同的id开始？ 
 $（$ input1）.keypress（function（）{//复制第一个输入框
 var $ this = $（this）; 
 window.setTimeout（function（）{//如果（$（'＃cloneAll'）。is（'：checked'））{// if checkbox empty 
 $（'* [id ^ =box]'），则延迟一点
。 val（$ this.val（））。attr（'readonly'，true）; //克隆所有输入并将它们设置为只读
} 
}，0）; 
}）; 
  

html

  1.< input type =textvalue =id =box1/>< label>< input type =checkboxid =cloneAll />克隆所有&l​​t; / label> 
< br /> 2.< input type =textvalue =id =box2/> 
< br /> 3.< input type =textvalue =id =box3/> 
< br /> 4.< input type =textvalue =id =box4/> 
< br /> 5.< input type =textvalue =id =box5/> 
< br /> 。 
< br /> 。 
< br /> 。 
< br /> 100.< input type =textvalue =id =box100/>< br /> 
  

问题是：

1. 如何找到每组class / id的第一个输入并将其设置为原型？
   
2. 如何在复选框选中时继续输入下列输入而不卡住？

小提琴或

var $ input1 = $（document）.find '输入[ID ^ = 框]'）滤波器（ '：可见：第一'）;。 //找到第一个输入以* box或其他相同的id开头$（$ input1）.keypress（function（）{//复制第一个框输入var $ this = $（this）; window.setTimeout（function （）{//延迟一点if（$（'＃cloneAll'）。is（'：checked'））{// if checkbox empty $（'* [id ^ =box]'）。val（$ this.val（））。attr（'readonly'，true）; //克隆所有输入并将它们设置为只读}}，0）;}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery。 min.js>< / script> 1.< input type =textvalue =id =box1/>< label> < input type =checkboxid =cloneAll/>克隆所有&l​​t; / label>< br /> 2.< input type =textvalue =id =box2/>< br />> 3.< input type =textvalue =id =box3/>< br /> 4.< input type =textvalue =id =box4/>< br /> 5.< input type =textvalue =id =box5/>< br /> 。< br /> 。< br /> 。< br /> 100.< input type =textvalue =id =box100/>< br />  

解决方案

代码中的这行代码将所有输入框设置为只读，并防止您键入在第一个箱子里。

  $（'* [id ^ =box]'）。val（$ this .val（））。attr（'readonly'，true）; //克隆所有输入并将它们设置为只读
  

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

  $ input1.attr（'readonly'，false）; 
  

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

更新后的代码段

var $ input1 = $（document）.find '输入[ID ^ = 框]'）滤波器（ '：可见：第一'）;。 //找到第一个输入以* box或其他相同的id开头$（$ input1）.keypress（function（）{//复制第一个框输入var $ this = $（this）; window.setTimeout（function （）{//延迟一点if（$（'＃cloneAll'）。is（'：checked'））{// if checkbox empty $（'* [id ^ =box]'）。val（$ this.val（））。attr（'readonly'，true）; //克隆所有输入并将它们设置为只读$ input1.attr（'readonly'，false）;}}，0）;}）;

< script src =https://ajax.googleapis.com/ ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script> 1.< input type =textvalue =id =box1/>< label> < input type =checkboxid =cloneAll/>克隆所有&l​​t; / label>< br /> 2.< input type =textvalue =id =box2/>< br />> 3.< input type =textvalue =id =box3/>< br /> 4.< input type =textvalue =id =box4/>< br /> 5.< input type =textvalue =id =box5/>< br /> 。< br /> 。< br /> 。< br /> 100.< input type =textvalue =id =box100/>< br />

I want to clone/duplicate the typing of the first input of each column in to the child boxes of the same class/id.

For example, there're 5 columns of data. Each column has its own class and specific ids. Once I start typing on the top input of each column and the checkbox checked. The following/child inputs of that column start typing the same stroke.

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 />

The questions are:

1. How to find the first input of each set of class/id and set it as a prototype?
2. How to continue typing the following input without stuck when a checkbox checked?

Fiddle or

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

<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 />

解决方案

This line in your code is setting all the input boxes to readonly and preventing you from typing in the first box as well.

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

If you add this line beneath it, it will allow you to continue typing in the first box.

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

Updated Fiddle: http://jsfiddle.net/be9br09j/2/

Updated Snippet

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

<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 />

这篇关于如何克隆键入从第一个盒子与jquery复选框的每个输入检查？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！