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 only the script that I need to turn on/off (the one that makes other buttons unclickable depending on which is specified.)

How it should work is:

if the checkbox is checked, allow script.

if the checkbox is unchecked, disable the script (make this script inactive and allow users to use the tool however they want).

However, I cannot complete the part that will add a checkbox functionality. Here’s what my code looks like:

function enabledisablebuttons() {
  var checkBox = document.getElementById("enabledisablecheckbox");
    //Should I add another var in here?

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

    function amnotesDisable1st() {
        document.getElementById("1st").disabled = true;
        document.getElementById("2nd").disabled = true;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = true;
    }
    function amnotesDisable2nd() {
        document.getElementById("1st").disabled = true;
        document.getElementById("2nd").disabled = true;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = false;
    }
    function amnotesDisable3rd() {
        document.getElementById("1st").disabled = true;
        document.getElementById("2nd").disabled = false;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = true;
    }
    function amnotesDisable4th() {
        document.getElementById("1st").disabled = false;
        document.getElementById("2nd").disabled = true;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = true;
    }

  if (checkBox.checked == true){
  
    //What to enter here
    
  } else {
  
    //And also here
  }
}

<label for="enabledisablecheckbox">Checkbox:</label> 

<input type="checkbox" id="enabledisablecheckbox" onclick="enabledisablebuttons()">

<br>

<button class="cbtn" onclick="resetallamnotes()">Reset</button>

<br><br>
        
<button id="1st" onclick="amnotesDisable1st()">1</button>
            
<button id="2nd" onclick="amnotesDisable2nd()">2</button>
            
<button id="3rd" onclick="amnotesDisable3rd()">3</button>
            
<button id="4th" onclick="amnotesDisable4th()">4</button>

I’m really new to coding, especially JS, but I really really need this feature now to work. Thank you in advance!

Answer

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;

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

    function resetallamnotes() {
        if (!shouldExecute) {
            return;
        }

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

    function amnotesDisable1st() {
        if (!shouldExecute) {
            return;
        }

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

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

        document.getElementById("1st").disabled = true;
        document.getElementById("2nd").disabled = false;
        document.getElementById("3rd").disabled = true;
        document.getElementById("4th").disabled = true;
    }
    function amnotesDisable4th() {
        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).