Question

On a form I have, there are two checkboxes, say Master and Slave. Whenever the master is checked, the slave needs to be checked (although slave could be unchecked by individually clicking on it). On the form load – the Master is set to check (default value) which means the slave also needs to be checked.

Then, I have some onChange event handler that manually checks and unchecks the slave based on the state of the master. This is where it doesn’t work , just in IE. It works fine in other browsers. I have no idea why this is happening.

I am using jQuery and some css class that merely toggles between checked image and unchecked image. This is an issue only with the checkbox CSS (visual / graphic). The value is still true for that checkbox.

Here is the code

dojo.ready(function() { 
    // some code removed for simplicaity sake
$("#militaryOfficial").attr("checked", true);
$("#waiveTax").attr("checked", true);
}
$('#militaryOfficial').click('change', toggleTaxWaive);     
});

function toggleTaxWaive(){
if($("#militaryOfficial").is(':checked'))
{
    if(!$("#waiveTax").is(':checked'))
    {
        $("#waiveTax").trigger("click"); 
    }
}else
{
    $("#waiveTax").attr('checked', false);
}
}

The HTML is pretty basic. Adding as per requests in the comment

<div class="checkBox_Border">
 <span class="cds_spanCheck" style="background: url("/images/checkbox_nonSelect.png")     
 no-repeat scroll 0% 0% transparent;"></span>
 <span class="cds_spanCheck" style="background: url("/images/checkbox_Select.png") no-   
 repeat scroll 0% 0% transparent;"></span>
 <input id="waiveTax" class="checkBox_innerWrap" type="checkbox" checked="checked"   
 value="true" name="waiveTax">
</div>

Please advise. Any help much appreciated.

Answer 1

Try this:

  $("#Button1").click(function() {
               if ($('#Checkbox1').attr('checked')) {
                   Checkbox1.checked = false;
               }
               else {
                   Checkbox1.checked = true;
               }
           });