how to disable and enable textbox when a checkbox is checked-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

$(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>