Question

I have a script that works when i click all 3 checkboxes it shows/hides 2 different divs.

<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" />
<input id="chk3" type="checkbox" />

var chkBoxes = $('#chk1,#chk2,#chk3');

      chkBoxes .change(function(){

      if (chkBoxes.filter(':checked').length == chkBoxes.length){
        $('#checked2').show();
        $('#checked1').hide();
      }else{
        $('#checked2').hide();
        $('#checked1').show();
      }
    });

Does anyone know how to modify this so i can disable the checkboxes as follows:

<input id="chk1" type="checkbox" disabled="disabled" />
<input id="chk2" type="checkbox" disabled="disabled" />
<input id="chk3" type="checkbox" disabled="disabled" />

and have a link for each checkbox to do the change function and tick the checkbox.
I’m using:

<a href="" onClick="document.checklist.chk1.value=1;">Link</a>
<a href="" onClick="document.checklist.chk2.value=1;">Link</a>
<a href="" onClick="document.checklist.chk3.value=1;">Link</a>

the above seems to work fine for checking the checkbox, but it does not invoke the jquery change function.

Hope this makes sense, thanks in advance.

Answer 1

aye. you need to fire off the checked event on the checkbox.. ill see if i can’t manage to produce a jsfiddle example.

http://jsfiddle.net/F7q4Y/

<a href="#" onclick="$('#chk1').trigger('click');">Link1</a>
<a href="#" onClick="$('#chk2').trigger('click');">Link2</a>
<a href="#" onClick="$('#chk3').trigger('click');">Link3</a>