如何通过复选框或切换打开/关闭特定的 Javascript 脚本？

Question

摘要：我正在寻找添加可以打开/关闭此特定脚本的切换或复选框的方法：

<script src="disabledbuttons.js"></script> （稍后会详细介绍）

切换应为 function，如下所示：

默认开启； 如果ON ，允许上面的脚本。 如果OFF ，禁用脚本。

如果要改用复选框，则checked的复选框为ON 。

为了简要解释该工具的使用，假设我有 10 个按钮。 如果我单击1 ，它将在 textarea 中插入单词“ one ”，并在“ two ”中插入单词2 ，依此类推...

现在这不是我问题的重点。 我想到的是，对于这 10 个按钮，每次单击每个按钮时都会发生另一个 function ......那就是禁用与它无关的其他按钮。

假设：对于按钮1 ，每次单击它都会禁用某些指定的按钮，例如5或6或10 。 其他按钮也是如此。 现在哪个是哪个并不重要。 但是这里的这个功能就是我上面提到的<script src="disabledbuttons.js"></script>

它看起来像这样：

 function resetall() { document.getElementById("2nd").disabled = false; document.getElementById("1st").disabled = false; document.getElementById("3rd").disabled = false; document.getElementById("4th").disabled = false; } function disable1st() { document.getElementById("1st").disabled = true; document.getElementById("2nd").disabled = false; document.getElementById("3rd").disabled = true; document.getElementById("4th").disabled = true; } function disable2nd() { document.getElementById("2nd").disabled = true; document.getElementById("1st").disabled = false; document.getElementById("3rd").disabled = false; document.getElementById("4th").disabled = true; } function disable3rd() { document.getElementById("2nd").disabled = true; document.getElementById("1st").disabled = false; document.getElementById("3rd").disabled = true; document.getElementById("4th").disabled = true; } function disable4th() { document.getElementById("2nd").disabled = false; document.getElementById("1st").disabled = false; document.getElementById("3rd").disabled = true; document.getElementById("4th").disabled = true; }

 <button id="reset" onclick="resetall()">Reset</button> <br><br> <button id="1st" onclick="disable1st()">1</button> <button id="2nd" onclick="disable2nd()">2</button> <button id="3rd" onclick="disable3rd()">3</button> <button id="4th" onclick="disable4th()">4</button>

我知道这个示例并不完全反映我上面提到的内容，但它是它的简化版本。 它的工作原理是，如果我单击一个按钮，它会根据它是true还是false禁用指定的按钮。

我真正想要和需要的是有一个这样的切换：

 .switch { position: relative; display: inline-block; width: 60px; height: 34px; }.switch input { opacity: 0; width: 0; height: 0; }.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked +.slider { background-color: #2196F3; } input:focus +.slider { box-shadow: 0 0 1px #2196F3; } input:checked +.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }.slider.round { border-radius: 34px; }.slider.round:before { border-radius: 50%; }

 <label class="switch"> <input type="checkbox" checked> <span class="slider round"></span> </label>

然后，此切换将用作打开/关闭script的一种方式。 换句话说，如果关闭，则没有禁用其他按钮的功能......用户可以自由点击任何按钮组合。

如果打开，则允许用户使用禁用按钮的其他按钮 onclick 的“引导”模式。

我已经设置了我需要的所有东西，除了这个切换（或复选框）。 我真的需要它（作为工具的设置），但我不知道如何开始。

我非常感谢任何帮助，以便我可以继续解决这个问题。

Answer 1

您可以在函数中使用if (checkbox.checked)语句。

 let btns = document.querySelectorAll('button'); let check = document.querySelector('input#check'); function disable(...args) { for (let i = 0; i < btns.length; i++) { const btn = btns[i]; if (args.includes(parseInt(btn.id)) && check.checked) { btn.disabled = true; } else { btn.disabled = false; } } } btns[0].addEventListener('click', function() { // Enable all disable(); }); btns[1].addEventListener('click', function() { disable(1, 3); }); btns[2].addEventListener('click', function() { disable(2, 4); }); btns[3].addEventListener('click', function() { disable(1, 2, 3); }); btns[4].addEventListener('click', function() { disable(1, 3); });

 <button>Reset</button> <input type="checkbox" id="check" checked> <hr> <button class="btns" id="1">1</button> <button class="btns" id="2">2</button> <button class="btns" id="3">3</button> <button class="btns" id="4">4</button>