How To Use If(checkbox.checked) To Disable A Particular Javascript?

I am currently experimenting with a script, and I want to add a checkbox to allow user to either activate it or not, based on their preference. I've simplified the sample to show o

Solution 1:

You'll need to expose a variable to keep track of your "should I execute?" state. If you are working with a version of JavaScript that supports classes, I would also recommend wrapping your code in a class.

var checkBox = document.getElementById("enabledisablecheckbox");
    var shouldExecute = checkBox.checked === true;

    functionenabledisablebuttons() {
        // Coerce the value to be truthy
        shouldExecute = checkBox.checked === true;
    }

    functionresetallamnotes() {
        if (!shouldExecute) {
            return;
        }

        document.getElementById("1st").disabled = false;
        document.getElementById("2nd").disabled = false;
        document.getElementById("3rd").disabled = false;
        document.getElementById("4th").disabled = false;
    }       

    functionamnotesDisable1st() {
        if (!shouldExecute) {
            return;
        }

        document.getElementById("1st").disabled = true;
        document.getElementById("2nd").disabled = true;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = true;
    }
    functionamnotesDisable2nd() {
        if (!shouldExecute) {
            return;
        }

        document.getElementById("1st").disabled = true;
        document.getElementById("2nd").disabled = true;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = false;
    }
    functionamnotesDisable3rd() {
        if (!shouldExecute) {
            return;
        }

        document.getElementById("1st").disabled = true;
        document.getElementById("2nd").disabled = false;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = true;
    }
    functionamnotesDisable4th() {
        if (!shouldExecute) {
            return;
        }

        document.getElementById("1st").disabled = false;
        document.getElementById("2nd").disabled = true;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = true;
    }

Additionally, if you wrap all of your buttons in a fieldset, you can disable only the fieldset and all of the child buttons will automatically be disabled (as opposed to individually disabling all of them).