Question

I’m creating an HTML form, which takes some of its options from a database (php + mysql)

In the php, I’m creating a checkbox input, with a select box next to it.

I named the checkbox houseAppsSelected[] and the select customCategories[], so I’ll get the values as an array.

I append all the HTML into a var called $options, and I echo it later on.

while ($row=mysql_fetch_array($result)) { 
    $cat_id=$row["category_id"]; 
    $cat_name=$row["category_name"]; 
    $options.="<INPUT type=\"checkbox\" name=\"houseAppsSelected[]\" VALUE=\"$cat_id\">".$cat_name." ---> ";


    $custom_sql="SELECT custom_cat_id, cat_name FROM custom_categories WHERE house_app='$cat_id'"; 
    $custom_result=mysql_query($custom_sql);

    $options.="<SELECT name=\"customCategories[]\">";
    $options.="<OPTION value=\"0\"> Choose Category </option>";

    while ($custom_row=mysql_fetch_array($custom_result)) {
        $custom_id = $custom_row['custom_cat_id'];
        $custom_name = $custom_row['cat_name'];
        $options.="<OPTION value=\"$custom_id\">".$custom_name."</option>";
    }

    $options.="</SELECT> <br /> <br />";
}

I want to have the checkbox control whether the select box is enabled or disabled.

I found this article, which makes it look easy, but if all the select boxes have the same name, it will disable all of them.

Is there a way to have a specific checkbox disable/enable only a specific select box, if I build them dynamically with php? (they all have the same name).

Answer 1

You can use the nextSibling property to find the select.

function chkboxClick(chkbox) {
    chkbox.nextSibling.nextSibling.disabled = !chkbox.checked;
}

Add the click handler like this:

<INPUT type="checkbox" onclick="chkboxClick(this)" ... /> 

Demo here: http://jsfiddle.net/gilly3/vAK7N/