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.

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.

• javascript
• forms

Share Improve this question Follow edited Jun 29, 2012 at 18:26 DavChana asked Jun 29, 2012 at 17:30 DavChanaDavChana 1,9661717 silver badges3636 bronze badges 3

• 2 Don't use square brackets as part of the name, your hunch was right. [] is an array accessor method when used like that in javascript. – TheZ Commented Jun 29, 2012 at 17:31
• @TheZ Ok, but then I could use yes1, yes2 etc, but how to refer it in JS? Is there some general way of referring? Like onchange(this)? – DavChana Commented Jun 29, 2012 at 17:35
• UPDATE: All Answers are working now. Sadly can accept only one answer. Have upvoted every answer. – DavChana Commented Jun 30, 2012 at 11:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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/DerekL/Zdf9d/
Pure JavaScript: http://jsfiddle/DerekL/Zdf9d/1/

Update

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

More Updates

Here's the demo:
Pure JavaScript: http://jsfiddle/DerekL/Zdf9d/3/
jQuery: http://jsfiddle/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.}

You can't use yes[] as an identifier in the Javascript, so you have to access the field using the name as a string:

document.mainForm["yes[]"]

This will not return a single element, it will return an array of elements. Use an index to access a specific element:

document.mainForm["yes[]"][0]

The value of the checkbox will always be the value property, regardless of whether the checkbox is selected or not. Use the checked property to find out if it's selected:

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

To access the specific checkbox that was clicked, send the index of the checkbox in the event call:

<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg" onclick="spenable(0);" /> OK

Use the index in the function:

function spenable(idx) {
  var yes = document.mainForm["yes[]"][idx].checked;
  var sp = document.mainForm["sp[]"][idx];
  sp.disabled = !yes;
}

If you are open to using jQuery:

$('input[type="checkbox"]').click(function(){
    var obj = $(this);
    obj.next('.cbox_sp').attr({'disabled':(obj.is(':checked') ? false : 'disabled')});
});

This solution will assign an onclick event handler to all checkboxes and then check to see if the corresponding "special" checkbox should be disabled or not. It also sets the default checked state to true.

Working Example: http://jsfiddle/6YTqC/