Change input form when checkbox is pressed

Question

I would like to create a webform which gives users the opportunity to create tickets more easily.

In this webform I have two input forms and a checkbox:

What I would like to have is the following (created via PowerPoint):

So if the users click the checkbox the webform should automatically disable the second input form and copy the value and/or the placeholder of the first input form. So briefly speaking: If the users click the checkbox the second input form should be exactly like the first one, except that it is disabled.

Unfortunately I have no clue how to do this. By now my code looks like this:

Input field 1 (key user) + checkbox:

<div class="form-group">
<label class="control-label col-sm-2" for="keyuser">Key-User:</label>
<div class="col-sm-10"> 
  <input type="keyuser" class="form-control" id="keyuser" placeholder="Username Key-User">

  <div class="checkbox">
    <label onclick="checkbox()">
        <input type="checkbox">
    </label>Is the affected user
  </div>
</div>

Input field 2 (affected user):

  <div class="form-group">
<label class="control-label col-sm-2" for="affuser">Affected User:</label>
<div class="col-sm-10"> 
  <input type="affuser" class="form-control" id="affuser" placeholder="Username affected user">
</div>

Checkbox() [it does not work at all right now]:

function checkbox() {
"use strict";
if (check === "False") {
    check = "True";
    $('#affuser').attr('placeholder', 'Username Key-User');

} else {
    check = "False";
    $('#affuser').attr('placeholder', 'Username affected user');
}

}

How can I implement the functions mentioned above?

Answer 1

There are some changes that I would want to implement to your script rightaway:

• Do not use inline JS. Instead, create an onchange event handler for the checkbox (not the label element)
• Use IDs for your checkbox so that your <label> will be functioanlly attached to it.

For the JS, it's quite simple: When an onchange event is registered on the checkbox element, evaluate if it is checked or not, by simply evaluating the .is(':checked') boolean:

• If checked:
  • disable the #affuser element using .prop('disabled', true)
  • update the placeholder attribute using .attr('placeholder', ...)
• If unchecked:
  • enable the aforementioned element using .prop('disabled', false)
  • update the placeholder attribute using, again, .attr('placeholder', ...)

$(function() {
  $('#checkbox1').on('change', function() {
    if($(this).is(':checked')) {
      $('#affuser')
        .prop('disabled', true)
        .attr('placeholder', $('#keyuser').attr('placeholder'));
    } else {
      $('#affuser')
        .prop('disabled', false)
        .attr('placeholder', 'Username affected user');
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label col-sm-2" for="keyuser">Key-User:</label>
  <div class="col-sm-10">
    <input type="keyuser" class="form-control" id="keyuser" placeholder="Username Key-User">

    <div class="checkbox">
      <label for="checkbox1">
        <input type="checkbox" id="checkbox1">
    </label>Is the affected user
    </div>
  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-2" for="affuser">Affected User:</label>
  <div class="col-sm-10">
    <input type="affuser" class="form-control" id="affuser" placeholder="Username affected user">
  </div>
</div>