javascript - 如何通过 onclick 切换开关打开/关闭特定的 JavaScript 脚本？

Question

我正在尝试为我的简单工具使用一项新功能，该功能本质上将添加一种“引导”的使用方式。

它的工作原理是：如果用户点击一个按钮，它会建议（启用）和禁用其他按钮。

现在我意识到有些用户不喜欢这种对工具的受限访问，这就是为什么我想问是否可以在设置中添加一个切换来打开/关闭这个功能。我希望它默认打开。

简单地说，切换应该意味着：如果它已打开，则允许“引导”功能。如果关闭，请禁用此功能并让用户单击他们想要的任何按钮。

这是我的示例：

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

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

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


<br><br>

<!---This toggle button--->

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

如果我没有太多代码可以显示，我想提前道歉。我是编码新手，还在学习……但如果可能的话，我真的很想拥有这个功能。在此先感谢，我非常感谢任何反馈/建议。

编辑：

希望进一步解释我的问题，这是该工具的屏幕截图。

如您所见，有几个按钮在单击时会通过在文本区域中插入特定文本来做出反应，更重要的是禁用任何不适合作为单击按钮的延续的按钮。

现在我正在寻找一个可以打开/关闭这种“引导”模式的功能，可能通过使用复选框，如果勾选或未勾选，或者切换，重要的是打开上面附加的脚本。

如果用户不想拥有此功能，则应打开/关闭“引导模式”。因此，他们应该能够随意单击任何按钮，而不受禁用按钮的限制。

上面提供的脚本是一个更简单的版本，但它正是我需要并一直在使用的。我只想能够通过切换打开/关闭它而无需编码。

标签： javascripthtmljquery

Answer 1

有点不清楚您要完成什么。我把这个使用 jQuery 的例子放在一起。

$(function() {
  function resetAll(event) {
    $("button:not('#reset')").prop("disabled", false)
      .removeClass("disabled")
      .addClass("enabled");
  }

  function disableButton(obj) {
    $(obj).prop("disabled", true).toggleClass("enabled disabled");
  }

  resetAll();

  $("button:not('#reset')").click(function(event) {
    if ($(".switch > input[type='checkbox']").is(":checked")) {
      if ($(this).is("#1st")) {
        resetAll();
        disableButton("#1st, #3rd, #4th");
      }
      if ($(this).is("#2nd")) {
        resetAll();
        disableButton("#2nd, #4th");
      }
    } else {
      disableButton(this);
    }
  });

  $("#reset").click(resetAll);
});

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

button {
  border: 1px outset #6c6c6c;
  background-color: #eee;
  padding: .4em 1.6em;
  border-radius: 6px;
  font-weight: 600;
}

button:hover {
  background-color: #ccf;
}

button.disabled {
  background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="reset">Reset</button>
<div style="margin: 1em 0;">
  <button id="1st">1</button>
  <button id="2nd">2</button>
  <button id="3rd">3</button>
  <button id="4th">4</button>
</div>
<!---This toggle button--->
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

更新

我添加了一个条件，如果 Toggle 为 On，单击将触发禁用。如果切换为关闭，则不会触发禁用。