How to use if(checkbox.checked) to disable a particular javascript?

  html, 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!

Source: Ask Javascript Questions

LEAVE A COMMENT