CODEWITHSUNDEEP
javascriptphpjquerycheckbox
Asif
Asif

Reputation: 39

how to make Textfield Editable when Checkbox is checked?

Actually, I have many checkboxes and textfields coming from database through single code. i want when i checked perticular checkbox, then a textfied in front of checkbox is bieng editable. so how can i do that ??

Here is my PHP code

<div class="my">
         <?php 
         while($ass = mysql_fetch_array($rs))
          { ?>
          <input type="checkbox" name="fees_name[]" id="fee_name" value="<?php echo $ass['fees_name'];?>"> <?php echo $ass['fees_name']; ?> 

<input id="fee_amt" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" >
                  <br><br>
         <?php } ?> // my while loop end here
          </div>

and my Javascript

<script>
  $(document).ready(function(){

  $('#fee_name').click(function() {

  $('#fee_amt').prop('disabled', !$(this).is(':checked'));

     });
  });
</script>

but it worked on only first checkbox. Anyone can tell my what can i do for others and how can i create different ID's for Each textfield ?? my textfields created by only one code. .

Upvotes: 0

Views: 718

Answers (3)

Ajith S
Ajith S

Reputation: 2917

Here is the working code what you need,

$( "input[type=checkbox]" ).on( "click", function(){
    if($(this).is(':checked')) {
        $(this).next().prop('disabled', false);
    } else {
        $(this).next().prop('disabled', true);
    }

});

HTML

<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" name="fees_name[]" >
<input type="text" disabled="disabled" /><br />
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br />
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" />

JSFIDDLE

If you need to give name then you could use input[name='fees_name[]']as,

$( "input[name='fees_name[]']" ).on( "click", function(){
    if($(this).is(':checked')) {
        $(this).next().prop('disabled', false);
    } else {
        $(this).next().prop('disabled', true);
    }

});

JSFIDDLE

Upvotes: 1

Jai
Jai

Reputation: 74738

You can do this way:

  1. Do not use same id for multiple elements
  2. if used then only first of it get the event

so workaround is:

  1. use class names instead
  2. this way you can apply same class name to multiple elems in a single page

try this below:

note: You have to disable the input type text first.

<input class="fee_amt" type="text" placeholder="amt" 
                                                name="fees_amt[]" disabled/>

then apply the script

$('.fee_name').change(function() {
  $(this).siblings('.fee_amt').prop('disabled', !this.checked);
});

See the code in Action

Upvotes: 0

geevee
geevee

Reputation: 5461

the following line is rendered multiple times:

<input type="checkbox" name="fees_name[]" id="fee_name" value="<?php echo $ass['fees_name'];?>"> <?php echo $ass['fees_name']; ?>

it means that the id fee_name won't be unique, and this is bad practice (and the reason that it works only for the first item).

try something like this:

instead of id="fee_name" put class="fee_name" (there's no problem with repeating class names, unlike ID's).

and replace your jQuery code with the following:

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

hope that helped.

Upvotes: 0

Related Questions