enable disable inputs text with its corresponding checkbox jquery

Question

Having several rows, where each row has a checkbox, a label, and an input text

How can I enable/disable the checkbox's neighbour input text when the check box is selected, using jquery. By this I mean to just enable/disable the input that is on same row with checkbox

I have:

<form>
    <p>         
        <input id="chk1" type="checkbox">
  <label >text 1 </label>
  <input id="input1" type="text">
    </p>
    <p>
      <input id="chk2" type="checkbox">
  <label >text 2 </label>
  <input id="input2" type="text">
    </p>
<p>
      <input id="chk3" type="checkbox">
  <label >text 3 </label>
  <input id="input3" type="text">
    </p>
</form>

and do not know how to do this

$(':checkbox').change(function(){
   $('input:text').?find?.prop("disabled", !$(this).is(':checked'));
});

here is fiddle

mscdeveloper · Accepted Answer · 2018-07-13 00:54:32Z

3

maybe like this:

$(':checkbox').change(function(){
   var this_nr=$(this).attr('id').substr(-1);
   $('#input'+this_nr).prop('disabled', !$(this).is(':checked'));
});
$(':checkbox').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
    <p>
        <input id="chk1" type="checkbox">
  <label >text 1 </label>
  <input id="input1" type="text">
    </p>
    <p>
      <input id="chk2" type="checkbox">
  <label >text 2 </label>
  <input id="input2" type="text">
    </p>
<p>
      <input id="chk3" type="checkbox">
  <label >text 3 </label>
  <input id="input3" type="text">
    </p>
</form>

or like this:

$(':checkbox').change(function(){
   $('input:text').eq($(':checkbox').index(this)).prop("disabled", !$(this).is(':checked'));
});
$(':checkbox').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <p>
        <input id="chk1" type="checkbox">
  <label >text 1 </label>
  <input id="input1" type="text">
    </p>
    <p>
      <input id="chk2" type="checkbox">
  <label >text 2 </label>
  <input id="input2" type="text">
    </p>
<p>
      <input id="chk3" type="checkbox">
  <label >text 3 </label>
  <input id="input3" type="text">
    </p>
</form>

edited Jul 13, 2018 at 0:54

answered Jul 13, 2018 at 0:23

mscdeveloper

2,9391 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

edgarmtze Over a year ago

liked the idea, however Would be better to use var this_nr=$(this).attr('id').replace(/\D/g,'');

Faisal Over a year ago

@cMinor I have same issue but my input fields are randomly generated from array, can you please have a look stackoverflow.com/questions/57849991/…

Useless Code · Accepted Answer · 2019-09-11 03:53:36Z

I would use event delegation on the form, in the handler using nextAll to find the next text box.

// disable all the text fields
$('#myform :text').each(function () {
  $(this).prop('disabled', true);
});

$('#myform').on('change', ':checkbox', function (evt) {
  let textbox = $(this).nextAll(':text');
  textbox.prop('disabled', (i, val) => !val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <p>         
    <input id="chk1" type="checkbox">
    <label for="chk1">text 1 </label>
    <input id="input1" type="text">
  </p>
  <p>
    <input id="chk2" type="checkbox">
    <label for="chk2">text 2 </label>
    <input id="input2" type="text">
  </p>
  <p>
    <input id="chk3" type="checkbox">
    <label for="chk3">text 3 </label>
    <input id="input3" type="text">
  </p>
  <p>
    <label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
    <label for="comment">Comments </label><input id="comment" type="text" value="This will toggle when you check the TOS">
  </p>
</form>

This works if your entire form is in this checkbox followed by textbox form; it will break if you have any other checkboxes that don't control a textbox or textboxes that shouldn't be disabled. To be more flexible, I would add a class to the items I wanted to have this behavior:

// disable all the text fields
$('#myform :text.toggle-input').each(function () {
  $(this).prop('disabled', true);
});

$('#myform').on('change', ':checkbox.toggle-input', function (evt) {
  let textbox = $(this).nextAll(':text.toggle-input');
  textbox.prop('disabled', (i, val) => !val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <p>         
    <input id="chk1" class="toggle-input" type="checkbox">
    <label for="chk1">text 1 </label>
    <input id="input1" class="toggle-input" type="text">
  </p>
  <p>
    <input id="chk2" class="toggle-input" type="checkbox">
    <label for="chk2">text 2 </label>
    <input id="input2" class="toggle-input" type="text">
  </p>
  <p>
    <input id="chk3" class="toggle-input" type="checkbox">
    <label for="chk3">text 3 </label>
    <input id="input3" class="toggle-input" type="text">
  </p>
  <p>
    <label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
    <label for="comment">Comments </label><input id="comment" type="text" value="This won't toggle when you check the TOS">
  </p>
</form>

H77 · Accepted Answer · 2018-07-14 01:00:00Z

You could use the jQuery siblings function to retrieve the neighboring textbox and enable/disable it based on the .checked property. I've called .change() at the end to set the initial state of the textboxes.

$(":checkbox")
  .change(function() {
    $(this)
      .siblings("input[type='text']")
      .prop("disabled", !this.checked);
  }).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input id="chk1" type="checkbox">
    <label>text 1 </label>
    <input id="input1" type="text">
  </p>
  <p>
    <input id="chk2" type="checkbox">
    <label>text 2 </label>
    <input id="input2" type="text">
  </p>
  <p>
    <input id="chk3" type="checkbox">
    <label>text 3 </label>
    <input id="input3" type="text">
  </p>
</form>

Collectives™ on Stack Overflow

enable disable inputs text with its corresponding checkbox jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related