How to disable enable a checkbox based on another checkbox?

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.

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
– 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
– 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
– DavChana, Commented Jun 30, 2012 at 11:42

Derek 朕會功夫 · Accepted Answer · 2018-04-19 06:18:03Z

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.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.}

edited Apr 19, 2018 at 6:18

answered Jun 29, 2012 at 17:37

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

DavChana Over a year ago

Excellent.. Just one minor thing I forgot. After ticking Ok, Special gets enabled. User then ticks the Special box. Then unticks the Ok. Now special gets disabled, but still ticked. Could it also get unticked(if ticked)?

Derek 朕會功夫 Over a year ago

@Davinder - So you want when the user tick Special, untick OK as well? Here a demo: jsfiddle.net/DerekL/Zdf9d/2

DavChana Over a year ago

No, The special should only be enabled if OK is ticked. In case after Ticking OK and Special, user again (just in case, if user changes the mind), unticks the OK, the Special should be unticked as well as disabled.

DavChana Over a year ago

And I guess Jquery version is more compact! (and fast?)

DavChana Over a year ago

Ok, working now.. Sad we can't accept more than one answer as Accepted answers.

|

Guffa · Accepted Answer · 2012-06-29 18:35:19Z

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;
}

Robert · Accepted Answer · 2012-06-30 11:56:40Z

2

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.net/6YTqC/

edited Jun 30, 2012 at 11:56

answered Jun 29, 2012 at 17:47

Robert

8,7672 gold badges29 silver badges34 bronze badges

3 Comments

DavChana Over a year ago

jsfiddle.net/EwW9g Working as required.. Just removed the checked:checked attr.. Dont want the Special Box to auto-check, just enabled.

Robert Over a year ago

@Davinder - "Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." Glad you were able to modify it for your implementation.

ThiefMaster Over a year ago

You should really use .prop() to set the 'checked' property (and use a boolean value instead of a string). Same for disabled.

Collectives™ on Stack Overflow

How to disable enable a checkbox based on another checkbox?

3 Answers 3

Update

More Updates

8 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

More Updates

8 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related