Question

I’m trying to assign a function to a couple of checkboxes, but I only want them added based on a condition, in this case the step number of the form. This is a roundabout way of making the checkboxes readOnly AFTER they have been selected (or not). So, at step 1 I want the user to choose cb1 or cb2, but at step 2 I want to assign the function that will not let the checkboxes values be changed.

What am I doing wrong?

function functionOne() {
    this.checked = !this.checked
};
if (document.getElementById("stepNumber").value == 2) {
    document.getElementById("cb1").setAttribute("onkeydown", "functionOne(this)");
    document.getElementById("cb2").setAttribute("onkeydown", "functionOne(this)");
}

Answer 1

You are passing the element in an argument, so use that:

function functionOne(elem) {
    elem.checked = !elem.checked
};

---

You could also use properties:

document.getElementById("cb1").onkeydown = functionOne;
document.getElementById("cb2").onkeydown = functionOne;

function functionOne() {
    this.checked = !this.checked
};