I have got to grips with how to make and parse forms with various types of input. But there is one thing that seems simple, but I don’t know how to do.
How do you make the availability of one (or a number of) field dependant on another?
For example, I have a single checkbox, followed by a group of checkboxes. If the first one is checked, I want the ones in the group disabled. If the first one is unchecked, all those in the group are available.
So you may select either that first one OR any of the group.
Can this be done with HTML alone, or does it require scripting?
It requires scripting—that is, JavaScript. 
I thought that would be the case.
But how?
I’ve done quite a bit of PHP now, but have only really dabbled with Javascript. This will mix with PHP, the group of checkboxes is created by PHP from SQL.
I’m really banging my head against the wall now.
I thought I had found the functions I needed, createAttribute to insert disabled=“disabled” into my checkbox inputs, using onchange as the trigger within the first checkbox.
But it’s not working.
When this happens I try do something very simple and take it one step at a time. But it seems I can’t get the simplest bit of js to work on this page for some reason. I have another page with some very simple js that works OK, but on this one it does nothing.
I can’t make any sense of it.
OK, the best thing to do is post a link or full code example so that someone can help out with it. I’ll move this thread to the JS forum, too.
That thing with no script working was strange, but is fixed now. I deleted it all and started again.
So I now have js that runs, but does not do what I want yet.
I’ll show some code.
This is the input for the first checkbox that should disable the group of checkboxes that follow.
<input id="vol" type="checkbox" name="vol" value="v" onchange="dischk(this.id,'mem');" />
This is the PHP that creates the group of checkboxes I want to disable with the first.
<?php
$memSQL = "SELECT * FROM tablename" ;
$rs = mysql_query($memSQL);
$m = 0 ;
while($row = mysql_fetch_array($rs)) {
echo " <span style=\\"display: inline-block;\\"><input id=\\"" . $m . "\\" class=\\"mem\\" type=\\"checkbox\\" name=\\"membs[]\\" value=\\"" . $row['id'] . "\\" />" . $row['name'] . " • </span>\
" ;
$m++ ;
}
?>
This creates HTML something like this.
<span style="display: inline-block;"><input id="0" class="mem" type="checkbox" name="membs[]" value="1" />Name1 • </span>
<span style="display: inline-block;"><input id="1" class="mem" type="checkbox" name="membs[]" value="5" />Name5 • </span>
<span style="display: inline-block;"><input id="2" class="mem" type="checkbox" name="membs[]" value="24" />Name24 • </span>
<span style="display: inline-block;"><input id="3" class="mem" type="checkbox" name="membs[]" value="26" />Name26 • </span>
And here is the script that is in the head before all this.
<script>
function dischk(vol,className){
// this does nothing really, just displays something so I know the function has triggered
var volval = document.getElementById("vol");
var disp = document.getElementById("disp")
disp.innerHTML = volval;
// this is supposed to add the disabled attribute to the checkboxes
var elemArr = document.getElementByClassName(className);
for(var i = 0; i < elemArr.length; i++){
var elem = document.getElementById(elemArr[i].id);
var newAtt = document.createAttribute("disabled");
newAtt.nodeValue = ("disabled");
elem.setAttributeNode(newAtt);
}
}
</script>
This is not meant to be complete, I’m just trying to do one step at a time. First I just want to add the disabled=“disabled” attribute when I check the box, but that’s not working yet.
After that I want it to add the attribute when checked, and remove it when unchecked.
OK, progress is being made.
getElementsByClassName is better than getElementByClassName 
what’s wrong with using the built-in ‘disabled’ property?
elemArr[i].disabled = true
what’s wrong with using the built-in ‘disabled’ property?
Probably nothing, but I have no idea what you mean.
However, I have something that half works now. When I check the forst box, the others are disabled.
That’s good but the next problem is reversing this action, so when I uncheck the box, they are enabled again.
I thought this was going to be easy using an “if” along with the value of the first box (which is “v”), but it seems the value is always “v” regardless of whether it is checked or not. I then thought I need to get the value for “disabled” from one of my other boxes for the “if” statement, but I can’t get that to work, the script breaks.
This is the script as I have it so far:
<script>
function dischk(className,att){
var elemArr = document.getElementsByClassName(className);
for(var i = 0; i < elemArr.length ; i++ ){
var elem = document.getElementById(elemArr[i].id);
var newVal = att ;
elem.setAttribute(att,newVal);
}
}
</script>
HTML for the first box
<input id="vol" type="checkbox" name="vol" value="v" onchange="dischk('mem','disabled');" />
And one of the other boxes, just one, they are all similar, I just added an empty disabled=“” to it since before.
<span style="display: inline-block;"><input id="0" class="mem" type="checkbox" name="membs[]" value="1" disabled="" />Name1 • </span>
So the main question is, how to reverse the disable.
I worked out why I could not get the “disabled” value from the boxes. Again down to stupid clumsy fingers, in the input I put didabled=“”, someone put those keys too close together.
So now I can get the value and thought this would work:
<script>
function dischk(className,att){
var memb = document.getElementById("0");
var a = memb.attributes;
var memval = a.disabled.value;
var elemArr = document.getElementsByClassName(className);
for(var i = 0; i < elemArr.length ; i++ ){
var elem = document.getElementById(elemArr[i].id);
if ( memval != att ) {
var newVal = att ;
}
else if ( memval == att) {
var newVal = "" ;
}
elem.setAttribute(att,newVal);
}
}
</script>
But not so simple.
I thought you had to put disabled=“disabled” to disable it, and having disabled=“” or disabled=“false” or anything other than “disabled” would leave it enabled. But no, just having the disabled attribute in there with any or no value will disable it.
So I must go back to actually adding the attribute, which I can do, but I don’t know how to remove it to reverse the action.
Also, the reason my script broke when I had the typo in it was because I was asking for an attribute which was not there. So how do I check for it if it’s not there?
Thought I would try that, and it works:
<script>
function dischk(className,att){
var elemArr = document.getElementsByClassName(className);
for(var i = 0; i < elemArr.length ; i++ ){
if ( elemArr[i].disabled != true ) {
elemArr[i].disabled = true ;
}
else if ( elemArr[i].disabled == true ) {
elemArr[i].disabled = false ;
}
}
}
</script>
I did not know you could add/remove attributes so easily.
Decades ago, a Cobol programmer once told me KISS (keep it simple, stupid). Seems be a true adage, regardless of the language and environment
I agree, there is nothing at all clever about making anything more complex than it needs to be.
My problem was a lack of knowledge and experience in JS, it’s not something I have got around to learning properly yet, so don’t know about all the functions available.
I just have to scrape around the various references to find something to do the task when needed, but don’t always find the most efficient way.
Thanks for the help.