Associate input type checkbox to input type text

Question

I have a problem, I need to associate a input type checkbox to a input type text.

The situation is as follows:

Extract data from a database. The PK data are the value of the checkbox. When a checbox select an input type text where you can enter a specific number is activated.

Now the problem is that selecting a checkbox input text all kinds are activated. And what I hope is that by selecting the checkbox input only the input associated with the checkbox enabled.

My HTML code (This code creates a input checkbox and input text for each record in the database, and what I want is to activate a specific checkbox is activated, the input type text):

<form action="send.php" method="POST" id="form-touch">
    <?php foreach ($data as $key): ?>
        <div id="inputsForm">
              <input type="checkbox" class="id-check" name="nuevoid[]" value="<?php echo $key['pr_id'] ?>">
                <input type="newquantity[]" class="myinput" disabled name="newQuantity" value="" placeholder="Enter quantity">
        </div>
    <?php endforeach; ?>
                <input type="submit" value="Send">
</form>

My jquery code (code that activates or deactivates the text field by selecting a checkbox):

$('.id-check').change(function(){
    if ($('.id-check').is(':checked') == false){
         $('.myinput').val('').prop('disabled', true);
   } else {
         $('.myinput').val('1').prop('disabled', false);
   }
});

How I can achieve what I want? Greetings from Chile.

use if ($(this).is(':checked') == false){ instead of if ($('.id-check').is(':checked') == false){ — Tamil Selvan C
– Tamil Selvan C, Commented Mar 30, 2015 at 2:52
I keep getting the same result. Thanks for your time and help. — Cristian Bustos
– Cristian Bustos, Commented Mar 30, 2015 at 2:59

Tamil Selvan C · Accepted Answer · 2015-03-30 03:02:11Z

2

Try

$('.id-check').change(function() {
  if ($(this).is(':checked') == false) {
    $(this).closest('div').find('.myinput').val('').prop('disabled', true);
  } else {
    $(this).closest('div').find('.myinput').val('1').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="send.php" method="POST" id="form-touch">

  <div id="inputsForm">
    <input type="checkbox" class="id-check" name="nuevoid[]" value="">
    <input type="newquantity[]" class="myinput" disabled name="newQuantity" value="" placeholder="Enter quantity">
  </div>
  <div id="inputsForm">
    <input type="checkbox" class="id-check" name="nuevoid[]" value="1">
    <input type="newquantity[]" class="myinput" disabled name="newQuantity" value="" placeholder="Enter quantity">
  </div>

  <input type="submit" value="Send">
</form>

answered Mar 30, 2015 at 3:02

Tamil Selvan C

20.3k12 gold badges55 silver badges72 bronze badges

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

1 Comment

Cristian Bustos Over a year ago

Your answer was very helpful, this is exactly what I was looking for and what I wanted to achieve. Thank you very much. Greetings from Chile.

Kiel Labuca · Accepted Answer · 2015-03-30 03:15:29Z

2

you can use .next() jQuery selector. I have modified your jQuery change handler below. It works for me so try it. It should work for you too.

$('.id-check').change(function(){
    if ($(this).is(':checked') == false){
        $(this).next().val('').prop('disabled', true);
    } else {
        $(this).next().val('1').prop('disabled', false);
    }
});

Goodluck and happy coding! :-)

answered Mar 30, 2015 at 3:15

Kiel Labuca

1,25310 silver badges14 bronze badges

Collectives™ on Stack Overflow

Associate input type checkbox to input type text

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related