Question

i have been working on this code !
and i couldn’t done it right .

what i want is the text box to be enabled when the corresponding checkbox is checked .
but when apply the function nothing happens 🙁

in my code the text and check boxes are dynamically generated from database using php .
here is my code :

<div><div class="ac-container">

<div id="accordion">

<?php

$qry="SELECT * FROM catalog";
$result= mysql_query($qry);
if($result){
while($info = mysql_fetch_array($result))
{

print "<h3><a href=\"\#\"> cat:".$info['name']."</a></h3><div>";

$qryitem="SELECT * FROM item WHERE Id=". $info['Cid'];
$resultitem=mysql_query($qryitem);
if($resultitem){

?>

<form name="form1" id="form" method="post" action="manage_item_action.php"  >
<?php
while($info=mysql_fetch_array($resultitem))
{
?>
<input type="checkbox"  id="checkB" name="op[]" value="<?php echo $info['Id'];?>" />   <?php echo $info['name'];?>
<label> Quantity <input disabled="disabled" id="textB" type="text" 
name="Quantit[]" value="<?php echo $info['Quantity'];?>"/>
</label>
<script>



 checkBoxes=document.form1.elements['op[]'];
 textBoxes=document.form1.elements['Quantit[]'];
 for(var i=0 ; i<checkBoxes.length;i++){
 checkBoxes[i].onchange = function() {
 textBoxes[i].disabled =!(this.checked);};


 }

 </script>



<br/>

        <?php
        } 
    }


 else echo "There are no items.";

 print "</div>";



}
}


?>

</div>

<input type="submit" value="update" name="submit"/>
<input type=reset value="clear"></td></tr> </form>

Answer 1

The problem you are having is that inside your event handler the variable i is not defined. To overcome this problem, you could add a property to each checkbox to save what index they are referring to:

checkBoxes=document.form1.elements['op[]'];
textBoxes=document.form1.elements['Quantit[]'];
for(var i=0 ; i<checkBoxes.length;i++)
{
    checkBoxes[i].myIndex = i;
    checkBoxes[i].onchange = function() {
        textBoxes[this.myIndex].disabled =!(this.checked);
    };
}

Other methods to solve this problem: http://www.howtocreate.co.uk/referencedvariables.html

Your code is still pretty messed up. For instance you are generating too many closing <div/>-tags with your first print-statement. I would suggest you just remove the PHP-code from your question, as the question is only related to html and javascript.

I would also suggest to use a library for manipulating DOM elements like jQuery.

When writing and debugging javascript, you should always make sure that you get error messages. “nothing happens” is a sign that you are just ignoring errors. For Firefox download the addon Firebug. Safari also has developer tools that you can activate in the settings. Using these tools will make it very easy to spot and solve problems like this.