Question

Following code is generated by a for loop.

<form action="saveresponse.php" method="POST" name="mainForm">

<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="01.jpg" disabled />Special<br />

<input class="cbox_yes" type="checkbox" name="yes[]" value="02.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="02.jpg" disabled />Special<br />

etc etc upto n times...

Now, what I want is that on page load, all the sp[] checkboxes should be disabled and enabled only if their corrosponding yes[] checkbox is checked by user.

Javascript code I am using: (Just to check if JS is capturing the states of yes[] checkbox?

function spenable(){
        var yes = document.mainForm.yes[].value;
            if (yes == true)
                //alert("true");
                document.mainForm.yes[].value = checked;
            else
                //alert("false");
                document.mainForm.yes[].value = checked;
        };
    };

But I am not getting any alert (Neither Yes, Nor No).

So, is yes[] (Square brackets) in second line is incorrect? Or my if/else condition is wrong in JS?

P.S. All the questions here at SO or on Google deal with only one case/pair.
P.S. If required, I can change yes[] to yes1, yes2, yes3 etc and corresponding sp1, sp2, sp3 where 1,2,3 is $i of For loop, but then how will I capture/refer to it in JS?

_UPDATE:_

The flow/conditions are(Clarification):
Initially Special checkbox will be disabled and OK checkbox will be unchecked.
Then if user checks Ok, Special gets enabled.
If user want, he can tick Special.
If, later, user changes mind and untick the OK, Special should be unticked as well as disabled again.

Answer 1

I used jQuery here for the sake of simplicity.

$("input[name='yes[]']").change(function() {      //When checkbox changes
    var checked = $(this).attr("checked");
    $(this).next().attr("disabled", !checked);    //The next checkbox will enable
});​                                               // or disable based on the
                                                  // checkbox before it

Demo: http://jsfiddle.net/DerekL/Zdf9d/
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/1/

Update

It will uncheck the first checkboxes when the Special checkbox is checked.
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/2/

More Updates

Here’s the demo:
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/3/
jQuery: http://jsfiddle.net/DerekL/Zdf9d/4/

_{Little note: document.querySelectorAll works on all modern browsers and IE8+ including IE8. It is always better to use jQuery if you want to support IE6.}