如何使用if(checkbox.checked)禁用特定的javascript?

Question

我目前正在试验一个脚本，我想添加一个复选框，允许用户根据自己的喜好激活或不激活它。

我简化了示例，仅显示需要打开/关闭的脚本(根据指定的按钮，使其他按钮无法单击的脚本。

它应该如何工作是：

如果选中该复选框，则允许脚本。

如果未选中该复选框，请禁用该脚本(使此脚本处于非活动状态，并允许用户根据需要使用该工具)。

但是，我无法完成将添加复选框功能的部分。这是我的代码的样子：

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>

我对编码真的很陌生，尤其是 JS，但现在我真的真的需要这个功能来工作。提前谢谢你！

Answer 1

您需要公开一个变量来跟踪您的"我应该执行吗？"状态。如果您使用的是支持类的 JavaScript 版本，我还建议您将代码包装在类中。

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;
}

此外，如果将所有button包装在fieldset中，则只能禁用fieldset，并且将自动禁用所有子button(而不是单独禁用所有子)。