how to disable and enable textbox when a checkbox is checked

Question

I have here multiple checkboxes which data is from the database. I want that the textbox will be remained disable until I checked or clicked the checkbox. lets just say this is the data that came from the database for example.

$(function() {
  $('.check').click(function() {
    if ($(this).is(':checked')) {
      $('.checks').removeAttr('disabled');
      $('.checks').focus();
    } else {
      $('.checks').attr('disabled', 'disabled');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>

<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>

<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>

read about on('change') or use ajax to check if X checkbox was checked and then enable other checkbox to be checked or not — Wordica
– Wordica, Commented Oct 5, 2021 at 17:24
I will thanks for the offer it will help me to enhance my skills — ALDRIN ATOLLE
– ALDRIN ATOLLE, Commented Oct 5, 2021 at 17:28

j08691 · Accepted Answer · 2021-10-05 17:21:37Z

2

Sure, you can reduce what you have to just the following, using $(this) to refer to the specific checkbox you're checking/unchecking:

$(function() {
  $('.check').click(function() {
    $(this).next().prop('disabled', !$(this).is(':checked'))
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>

<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>

<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>

answered Oct 5, 2021 at 17:21

j08691

209k33 gold badges269 silver badges281 bronze badges

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

1 Comment

ALDRIN ATOLLE Over a year ago

Thank you sir...for this code.it help me to solve my problem

Roman · Accepted Answer · 2021-10-05 17:22:33Z

0

$(function() {
  $('.check').click(function() {
    if ($(this).is(':checked')) {
      $(this).next('.checks').removeAttr('disabled');
      $(this).next('.checks').focus();
    } else {
      $(this).next('.checks').attr('disabled', 'disabled');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>

<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>

<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>

answered Oct 5, 2021 at 17:22

Roman

6324 silver badges22 bronze badges

1 Comment

ALDRIN ATOLLE Over a year ago

Thanks you sir for this answer

Collectives™ on Stack Overflow

how to disable and enable textbox when a checkbox is checked

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related