Question

I have two checkboxes with different names:

<input type="checkbox" name="checkbox1" value="checkbox1">
<input type="checkbox" name="checkbox2" value="checkbox2">

I’d like to implement code where when checkbox1 is checked, checkbox2 is disabled and when checkbox2 is checked, checkbox1 is disabled. When it’s unchecked, it should enable the other back as well.

How can I achieve with jQuery or JavaScript?

Answer 1

Firstly, I’m assuming the work you want to do cannot be done via Radio Buttons because that’s the obvious choice here. In case it can, here’s a few links for that:
http://wiki.answers.com/Q/What_are_the_differences_between_radio_buttons_and_checkboxes
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

Checkbox 1: <input id="checkbox1" type="checkbox" onchange="onCheckboxChanged();"/>
Checkbox 2: <input id="checkbox2" type="checkbox" onchange="onCheckboxChanged();"/>
<script type="text/javascript">
    //Initialize checkboxes
    onCheckboxChanged();
</script>

Js:

var onCheckboxChanged = function(checkbox){
    var checkbox1 = document.getElementById('checkbox1');
    var checkbox2 = document.getElementById('checkbox2');

    if(checkbox1.checked){
        checkbox2.disabled = true;
    }
    else {
        checkbox2.disabled = false;
    }

};