lundi 2 octobre 2017

Copy State of Groups of Checkboxes based off of another Checkbox

I have a form that has repeating demographic info in 5 separate sections. I want to copy all the demographic info from one section to another if the user clicks yes on a radio and then selects the appropriate section to copy the info from.

I've got this working with text inputs without issue however it fails completely with check boxes. I managed to create a working demo of what I'd like in jsfiddle however the checkbox portion does not work on my form so I was wondering if anyone had any other suggestions.

The demographic info sections mirror each other 100% but it is possible someone would want to put different demographic info in different sections, hence why we're not just duplicating or cloning the input.

<div id="toolSet1">
<h3>
Tool Set 1 (complete all fields then select 'Yes' radio)
</h3>
  Name:
  <input type="text" name="name1" id="name1">
  <br>
  <input type="checkbox" name="race1" id="race1">Check this box!
  <br>
  <input type="textarea" class="textBlock1" name="textBlock1" id="textBlock1">
</div>
<br>
<br> 
Will the demographic information for this tool set be identical to another tool set you have already completed?
<input type="radio" name="demoInfoSame" value="yes">Yes
<input type="radio" name="demoInfoSame" value="no">No
<br>
<br>
<div class="hidden" name="toolList" id="toolList">
  From which tool set would you like to copy demographic information?
  <ul class="toolSetList">
    <li>
      <input type="checkbox" class="toolSet" id="patStudyEstimate" disabled>Patient Study Estimate (check this one)</li>
    <li>
      <input type="checkbox" class="toolSet" disabled>Patient Registry</li>
    <li>
      <input type="checkbox" class="toolSet" disabled>Electronic Data Capture</li>
    <li>
      <input type="checkbox" class="toolSet" disabled>Data Extraction</li>
    <li>
      <input type="checkbox" class="toolSet" disabled>Patient Recruitment</li>
  </ul>
</div>
<div id="toolSet2">
<h3>
Tool Set 2
</h3>
  Name2:
  <input type="text" class="name2" name="name2">
  <br>
  <input type="checkbox" class="race2" name="race2" id="race2">
  <br>
  <input type="textarea" class="textBlock2" name="textBlock2" id="textBlock2">
</div>
<br>
<div class="hidden" name="finalStep" id="finalStep">
<h2>
Now click 'No' radio button.
</h2>
</div>

//Reveal Section and Enable Inputs/Hide Section, Clear Fields, Disable Inputs
$(document).ready(function() {
  $('input[type=radio][name=demoInfoSame]').change(function() {
    if (this.value == 'yes') {

      $('#toolList').fadeIn('slow').find('input').prop('disabled', false);

    } else if (this.value == 'no') {

      $('#finalStep').fadeOut('slow')
      $('#toolList').fadeOut('slow').find('input').prop('disabled', true);
      $('#toolList').find('input:checkbox').prop('checked',false).end();
      $('#toolSet2').find('input.name2').val('').end();
      $('#toolSet2').find('input.textBlock2').val('').end();
      $('#toolSet2').find('input:checkbox').prop('checked',false).end();
    }
  });
});

//Autofill Form Based on Checkbox State
var myInput = $('#name1');
var copyTextArea = $('#textBlock1');

$(document).ready(function() {
  $('#patStudyEstimate').change(function() {
    if (this.checked)
      $('#toolSet2').find('input.name2').val(myInput.val());
      $('#toolSet2').find('input.textBlock2').val(copyTextArea.val());
      $('#finalStep').fadeIn('slow');
      $( '#toolSet2' ).children( 'input:checkbox' ).each( function( i ) {
            var toolSet1Checks = $('#toolSet1' ).children( 'input:checkbox' ).eq( i                 ).prop( 'checked' );
                if ( toolSet1Checks )
            {
            $( this ).prop( 'checked', true );
            }
                else
            {
            $( this ).removeProp( 'checked' );
            }
        });
  });
});

Working JSFiddle: http://ift.tt/2fKz75i




Aucun commentaire:

Enregistrer un commentaire