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

Question

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!

Code in onclick attributes is executed in the global scope. It can't reference functions that are defined inside another function. — Barmar
– Barmar, Commented Apr 8, 2021 at 18:42
All those functions need to be defined at top-level, not inside enabledisablebuttons — Barmar
– Barmar, Commented Apr 8, 2021 at 18:43
Woah, thank you for the useful information there, sir. However I don't know how to implement the change needed for it to work or look in almost the same way. — ixcode
– ixcode, Commented Apr 8, 2021 at 18:49
I'm not really sure what you want. I don't think there's a way to disable all JavaScript. How would you undo it, since it would disable the JS that runs when you uncheck the box? — Barmar
– Barmar, Commented Apr 8, 2021 at 18:54
If you just want to disable all the buttons, you can do it similarly to the way you enable all the buttons in resetallamnotes(). — Barmar
– Barmar, Commented Apr 8, 2021 at 18:55

ellison · Accepted Answer · 2021-04-09 13:18:02Z

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;

    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).

edited Apr 9, 2021 at 13:18

answered Apr 8, 2021 at 18:55

ellison

691 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ixcode Over a year ago

This solution looks really interesting and might be the one I need. However I don't understand yet some of your suggestions (still not able to learn this). I tried pasting the script together with my HTML and it's not working. I have no clue what I missed?

ellison Over a year ago

I had an unmatched bracket at the end of the snippet. I've corrected it.

ixcode Over a year ago

Thank you so so much! Yaay I can finally move on to the next steps. Thank you!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related