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!
Advertisement
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 button
s in a fieldset
, you can disable only the fieldset
and all of the child button
s will automatically be disabled (as opposed to individually disabling all of them).