Triggering text area by clicking related select/checkbox

user_15565949 0
Viewed 60

I've created a form in which one of the questions consists of a checkbox and a textarea. I removed the standard view of checkboxes and made my own on their place. I now want to integrate the trigger of the checkbox click makes the textbox active.

I'm using jQuery and I don't know pure JS well. Unfortunately I don't have opportunity to change the HTML in my case.

var $other = $('input[type=text][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after('<label class="form-check-label" for="' + otherOption + '">');
$other.off('change');
$other.on('input');
$other.on('blur');
label {
  font-size: 2rem;
  color: #303030;
  letter-spacing: 0.04rem;
  line-height: 2.5rem;
}

label {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0.6rem;
  line-height: 180%;
}

input[type="checkbox"].form-check-input {
  position: absolute;
  left: -9999px
}

input[type="checkbox"].form-check-input+label {
  position: relative;
  cursor: pointer;
}

input[type="checkbox"].form-check-input+label:before {
  content: '';
  background: #fff;
  border: 1px solid #808080;
  border-radius: 0.3rem;
  height: 1.4rem;
  width: 1.4rem;
  position: absolute;
  top: 0.5rem;
  left: 0;
}

input[type="checkbox"].form-check-input+label:after {
  content: '';
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: transparent transparent #673F9A #673F9A;
  width: 1rem;
  height: 0.5rem;
  position: absolute;
  top: 0.8rem;
  left: 0.2rem;
  opacity: 0;
  transform: scale(2) rotate(-45deg);
}

input[type="checkbox"].form-check-input:checked+label:after {
  opacity: 1;
  transform: scale(1) rotate(-45deg);
  color: #673F9A
}

.form-control {
  display: block;
  width: 100%;
  line-height: 1.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  color: #606060;
  text-transform: none;
  border: 2px solid #ededed;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 0.6rem;
  margin-bottom: 2.4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

input[type="text"].form-control:focus {
  border: 2px solid #673F9A;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 1.6rem;
  margin-bottom: 2.4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.form-check-other {
  position: relative;
}

.form-check-other .form-check-label {
  position: absolute!important;
  left: 0;
}

.form-check-label,
.form-check-other {
  display: inline-block;
  padding-left: 2.5rem;
  font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="construction and real estate" value="construction and real estate">
  <label class="form-check-label" for="construction and real estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
  <input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__">
  <input class="form-control" type="text" name="other_option_response" value="" placeholder="your text">
</div>

jquery javascript
2 Answers

To do what you require you can hook a change event handler to the checkbox which sets the state of the disabled property of its sibling textbox.

Also note that it's invalid HTML to have spaces within id attributes, so I replaced them with underscores in the following example.

// this should *REALLY* be in the HTML, not hacked in using JS.
var $other = $('input[type="text"][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after(`<label class="form-check-label" for="${otherOption}">`);

// toggle disabled state
$('.form-check-input').on('change', e => {
  $(e.target).siblings(':text').prop('disabled', !e.target.checked).focus();
});
label {
  font-size: 2rem;
  color: #303030;
  letter-spacing: 0.04rem;
  line-height: 2.5rem;
}

label {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0.6rem;
  line-height: 180%;
}

input[type="checkbox"].form-check-input {
  position: absolute;
  left: -9999px
}

input[type="checkbox"].form-check-input+label {
  position: relative;
  cursor: pointer;
}

input[type="checkbox"].form-check-input+label:before {
  content: '';
  background: #fff;
  border: 1px solid #808080;
  border-radius: 0.3rem;
  height: 1.4rem;
  width: 1.4rem;
  position: absolute;
  top: 0.5rem;
  left: 0;
}

input[type="checkbox"].form-check-input+label:after {
  content: '';
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: transparent transparent #673F9A #673F9A;
  width: 1rem;
  height: 0.5rem;
  position: absolute;
  top: 0.8rem;
  left: 0.2rem;
  opacity: 0;
  transform: scale(2) rotate(-45deg);
}

input[type="checkbox"].form-check-input:checked+label:after {
  opacity: 1;
  transform: scale(1) rotate(-45deg);
  color: #673F9A
}

.form-control {
  display: block;
  width: 100%;
  line-height: 1.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  color: #606060;
  text-transform: none;
  border: 2px solid #ededed;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 0.6rem;
  margin-bottom: 2.4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

input[type="text"].form-control:focus {
  border: 2px solid #673F9A;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 1.6rem;
  margin-bottom: 2.4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.form-check-other {
  position: relative;
}

.form-check-other .form-check-label {
  position: absolute!important;
  left: 0;
}

.form-check-label,
.form-check-other {
  display: inline-block;
  padding-left: 2.5rem;
  font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="construction_and_real_estate" value="construction and real estate" />
  <label class="form-check-label" for="construction_and_real_estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
  <input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__" />
  <input class="form-control" type="text" name="other_option_response" value="" placeholder="your text" disabled />
</div>

user_5194130

You need to get the click on element and then use nextAll to find next input.

And then, you use focus and blur to fire on your input.

I also used class to check if click element was already clicked or not

var $other = $('input[type=text][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after('<label class="form-check-label" for="' + otherOption + '">');

$('.form-check-input').change(function() {
  if (!$(this).hasClass('checked')) {
    $(this).addClass('checked').nextAll('input[name=other_option_response]:first').focus();
  } else {
    $(this).removeClass('checked').nextAll('input[name=other_option_response]:first').blur();
  }
});
label {
    font-size: 2rem;
    color: #303030;
    letter-spacing: 0.04rem;
    line-height: 2.5rem;
}
label {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0.6rem;
    line-height: 180%;
}
input[type="checkbox"].form-check-input {
  position: absolute;
  left: -9999px
}
input[type="checkbox"].form-check-input+label {
  position: relative;
  cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
  content: '';
  background: #fff;
  border: 1px solid #808080;
  border-radius: 0.3rem;
  height: 1.4rem;
  width: 1.4rem;
  position: absolute;
  top: 0.5rem;
  left: 0;
}
input[type="checkbox"].form-check-input+label:after {
  content: '';
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: transparent transparent #673F9A #673F9A;
  width: 1rem;
  height: 0.5rem;
  position: absolute;
  top: 0.8rem;
  left: 0.2rem;
  opacity: 0;
  transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
     opacity: 1;
     transform: scale(1) rotate(-45deg);
     color: #673F9A
}
.form-control {
    display: block;
    width: 100%;
    line-height: 1.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    color: #606060;
    text-transform: none;
    border: 2px solid #ededed;
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0 0.6rem;
    margin-bottom: 2.4rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
 }
input[type="text"].form-control:focus {
    border: 2px solid #673F9A;
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0 1.6rem;
    margin-bottom: 2.4rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
 }
 .form-check-other {
    position: relative;
 }
 .form-check-other .form-check-label{
   position: absolute!important;
   left: 0;
 }
 .form-check-label, .form-check-other {
    display: inline-block;
    padding-left: 2.5rem;
    font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="construction and real estate" value="construction and real estate">
    <label class="form-check-label" for="construction and real estate">construction and real estate</label>
  </div>
  <div class="form-check form-check-other">
    <input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__"> 
    <input class="form-control" type="text" name="other_option_response" value="" placeholder="your text">
  </div>

user_4012780
Related