How to clone typing to every input from the first box with jquery on checkbox checked?

0 votes
asked Sep 11, 2017 by wilf

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

1 Answer

0 votes
answered Sep 11, 2017 by osdavison

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 />
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...