checkbox based input item

I am having a form like checkbox based allowed to edit. once i click the checkbox after the input item should be enabled. i attached a image

Attached Files

Thumbnail(s)
   

  application.php (Size: 3.26 KB / Downloads: 55)

If you want to submit form or some data, use <input type="checkbox" onchange="myfunction(this)" ...>

Then write JS function myfunction (you can name it whatever makes sense to you, of course), and make that function post data to server. If you use jQuery it'll be $.post() function.

If you want to submit form or some data, use <input type="checkbox" onchange="myfunction(this)" ...>

Then write JS function myfunction (you can name it whatever makes sense to you, of course), and make that function post data to server. If you use jQuery it'll be $.post() function.

First row only affected. remaining row no output

 echo '<td  align="center"><input type="number" min="0" max="999" name="cnt" value="0"   onkeyup="sum();" id="texttwo" disabled></td>';

echo '<td align="center"><input type="checkbox" value="' . $row['certificate_id'] . '" name="certid[]" id="chb"></td>';

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
  document.getElementById('chb').onchange = function() {
    document.getElementById('texttwo').disabled = !this.checked;
};
</script>

It's because ID value should only be used once.

Change it to class="chb" and getElementsByClassName('chb') and it should work as intended.

It's because ID value should only be used once.

Change it to class="chb" and getElementsByClassName('chb') and it should work as intended.

I try this . not working
echo '<td  align="center"><input type="number" min="0" max="999" name="cnt" value="0"   onkeyup="sum();" class="texttwo" disabled></td>';                 

                     echo '<td align="center"><input type="checkbox" value="' . $row['certificate_id'] . '" name="certid[]" class="chb"></td>';  



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  document.getElementsByClassName('chb').onchange = function() {
    document.getElementsByClassName('texttwo').disabled = !this.checked;
};
</script>

It's because ID value should only be used once.

Change it to class="chb" and getElementsByClassName('chb') and it should work as intended.

my full coding is attached. kindly help me to solve my problem

No one is going to solve your problem for you they will only try to help you.

For one check boxes and radio buttons have no value if they are not checked.
There just plain empty.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

To toggle the disabled property of the text inputs, first give all text and number inputs a class name and the disabled property: class="txtbox" disabled="disabled".
Then give the checkboxes the class name "cbx".

Load jQuery. Insert the following script:

Code:

<script>

$(document).ready(function(){
    $('.cbx').click(function(){
        v = $(this).is(':checked');
        row = $(this).parents('tr');
        if (v==true) {
            row.find('.txtbox').removeAttr('disabled');    
        }
        else {
            row.find('.txtbox').attr('disabled','disabled');
        }
        
    });

});

</script>

Now, if you click on one of the checkboxes, the text and number inputs on the same row are enabled or disabled.


Important:

Code:

$('.cbx')

is jQuery code for document.getElementsByClassName('cbx')
As you can see, jQuery makes your code far more simple!

To toggle the disabled property of the text inputs, first give all text and number inputs a class name and the disabled property: class="txtbox" disabled="disabled".
Then give the checkboxes the class name "cbx".

Load jQuery. Insert the following script:

Code:

<script>

$(document).ready(function(){
    $('.cbx').click(function(){
        v = $(this).is(':checked');
        row = $(this).parents('tr');
        if (v==true) {
            row.find('.txtbox').removeAttr('disabled');    
        }
        else {
            row.find('.txtbox').attr('disabled','disabled');
        }
        
    });

});

</script>

Now, if you click on one of the checkboxes, the text and number inputs on the same row are enabled or disabled.


Important:

Code:

$('.cbx')

is jQuery code for document.getElementsByClassName('cbx')
As you can see, jQuery makes your code far more simple!

Working perfectly.
Thanks a lot. You are the real programmer.
one more queries.
I want to multiply first and second field result should be in third field. It has 7 rows.

echo '<td id="textone_'.$row['id'].'">'.$row['fee']. '</td>'; 
  echo '<td  id="texttwo_'.$row['id'].'"> <input type="number" min="0" max="999" 
  name="india"  
  onChange="sum('.$row['id'].'); " class="txtbox" disabled="disabled" ></td>';
echo '<td> <input type="text" value="0"

   id="result_'.$row['id'].'" name="result"></td>';
Ajax 
****

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

<!--<script src="<?php echo base_url(); ?>assets/jQuery-2.1.4.min.js"></script> -->

<script type="text/javascript">
 function sum(rowid) {
       var txtFirstNumberValue =  document.getElementById('textone_'+rowid).innerHTML;
       alert(txtFirstNumberValue );
       var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
       alert(txtSecondNumberValue ); 
       
       var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
       alert(result);
       if (!isNaN(result)) {
           document.getElementById('result_'+rowid).value = result;
       }
   }
  </script>

alert(txtSecondNumberValue ) shows undefined error.
how to solve this?

Give the inputs for the number of sets a name also: name="sets[]".
Remove the onChange part that you already have.

Then, in the jQuery part that starts with $(document).ready .. insert this:

Code:

    $("input[name='sets[]']").change(function(){
        row = $(this).parents('tr');
        n = $(this).val();
        f = row.find("input[name='india[]']").val();
        total = n * f;
        alert(total);
    });

Now, if you change any of the inputs with the name "sets[]", it will trigger a calculation.