Question

I’m a little new to javascript. I have a bunch of checkboxes for an html form. The checkboxes are dynamically generated from a python script. The last checkbox I have is entitled “N/A”, I want to make it so that if any of the other checkboxes are checked, the “N/A” checkbox automatically disappears. If the N/A checkbox is checked, the others disappear. And of course, if I uncheck the boxes, the opposite should occur. I know that i need to assign the different input fields different id’s so javascript can identify them, but I’m not sure how to write the javascript to make the actual disappearing action to occur.
Thank you.

edit;; Some dynamic python code:

print "<blockquote><strong>Labels:</strong><br/>"
for elem in output_list:
    if elem not in non_delete_list:
        print "<input type=\"checkbox\" name=\"remove_cd\" value=\"" + elem + "\" />" + elem + "<br/>"
print "<input type=\"checkbox\" name=\"remove_cd\" value=\"r_on\" />N/A:"
print_reason_list()
print "<font color=\"#cc0000\">Reason Required</font><hr/>"

So basically, anything with the value=elem part is dynamic, the final checkbox is N/A (value=”r_on”).

edit 2:

So I’m able to get the boxes to disappear thanks to @Ankit (using document….style.display= “none”). The issue I’m having is that once a box is checked, respective id becomes PERMANENTLY hidden. In order to fix this, I made a hide and unhide function and my onclick looks like:

"onclick=if(this.checked){hide("NA")}else{unhide("NA")}" 

And that allows me to uncheck the boxes and cause the respective tags to reappear. I’m running into a new issue however. With the checkboxes of value elem. If I check two boxes, and then uncheck one of the boxes, the “NA” appears again. I want it to remain hidden as long as there is an “elem” box that is checked. Basically, I need to rescan all the checkboxes to see their current states (I think). How can I do this?

Answer 1

You can enable/disable an html element through javascript with:

document.getElementById('<the id of your checkbox here>').disabled = true;

For your case just put a div tag around the dynamic check boxes and add/remove that div based on your need.

Example:-

print "<blockquote><strong>Labels:</strong><br/>"

for elem in output_list:
    if elem not in non_delete_list:
        print "<div id=\"listBox\" >"
        print "<input type=\"checkbox\" name=\"remove_cd\" value=\"" + elem + "\" onclick=\"if(this.checked){myFunction("upperChkBoxes")}\" />" + elem + "<br/>"
        print "</div>"
print "<input type=\"checkbox\" name=\"remove_cd\" value=\"r_on\"  onclick=\"if(this.checked){myFunction("NA")}\"  />N/A:"
print_reason_list()
print "<font color=\"#cc0000\">Reason Required</font><hr/>"


function myFunction(par){
// put your logic of add/remove here based on par value as "upperChkBoxes" or "NA"
}

Hope that helps.