What is wrong with this JavaScript code?

Question

I have two checkboxes name check1 and check2. I wanted for either one to be disabled if the other one was checked. This is what I did:

var male = document.getElementById("check1");
var female = document.getElementById("check2");

male.disabled = (female.checked == true) ? true : false;
female.disabled = (male.checked == true) ? true : false;

It does not work at all. Is the syntax correct. What did I do wrong?

Answer 1

You need the onchange event, and your code could be tidied up as well.

var male = document.getElementById("check1"),
    female = document.getElementById("check2");

male.onchange = function() {
    female.disabled = male.checked;
};

female.onchange = function() {
    male.disabled = female.checked;
};

jsFiddle .

Also, shouldn't you be using radio input?

Answer 2

disabled shouldn't be set at all in order to be disabled AFAIK, any value is "truthy"

do .removeAttribute('disabled') to not have it disabled.

Answer 3

you need to change the state of the other checkbox when one is clicked eg. male changed - alter female, and versa verse.

function maleOnClick(){
    female.checked= !this.checked;
}
function femaleOnClick(){
    male.checked= !this.checked;
}

Anyway why dont you use type="radio"

Answer 4

Try:

 male.setAttribute('disabled', 'disabled'); //set
 male.setAttribute('disabled', ''); //clear

So:

male.setAttribute = (female.checked == true) ? 'disabled': '';