How to turn on/off a particular Javascript script via checkbox or toggle?

Question

Summary: I'm looking for way to add a toggle or a checkbox that can turn on/off this particular script:

<script src="disabledbuttons.js"></script> (More on this later)

The toggle should function as this:

ON by default; If ON, allow the script above. If OFF, disable the script.

If going to use a checkbox instead, a checked checkbox is ON.

To explain the use of the tool briefly, let's say I have 10 buttons. If I click 1, it will insert the word "one" in the textarea and 2 for "two", and so on...

Now that's not the focus of my question. What I have in mind is, with those 10 buttons, there's another function happening every time each button is clicked... and that is by disabling the other buttons not related to it.

So let's say: for button 1, every time it's clicked it will disable certain specified buttons, like 5 or 6 or 10. This is also the case for the other buttons. It doesn't matter for now which is which. But this feature here is the one I mentioned above <script src="disabledbuttons.js"></script>

And it looks like this:

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>

I know this sample doesn't exactly reflect what I mentioned above, but it's a simplified version of it. How it works is, if I click a button, it disables the specified buttons based on if it's true or false.

What I really want and need is to have a toggle like this:

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

This toggle will then serve as a way to turn on/off the script. In other words, if turned off, no feature that disables other buttons... users can freely click on any combination of buttons.

If turned on, allows the user to use the "guided" mode that disabled other buttons onclick of a button.

I have already set everything up I need, except for this toggle (or checkbox). I really need it (as a settings for the tool) but I don't know how to start.

I would really appreciate any help so that I may move on from this problem.

I'll be honest this question makes very little sense and the simplified demos make it more confusing. Can you please edit the question to have a clear problem statement and a single code example demonstrating it. — Rory McCrossan
– Rory McCrossan, Commented Apr 8, 2021 at 17:40
Thank you for taking the time to read my question, I honestly agree, and apologize if I cannot explain it more clearly. But can you please let me know which is the most confusing part? I only really need a switch that can either turn on or off that feature or script above. I'm still new to coding that's why I have no clue how to make it possible... but will appreciate any help. — ixcode
– ixcode, Commented Apr 8, 2021 at 18:01

LuisAFK · Accepted Answer · 2021-04-08 18:33:19Z

1

You can just use an if (checkbox.checked) statement in the functions.

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>

edited Apr 8, 2021 at 18:33

answered Apr 8, 2021 at 17:26

LuisAFK

9567 silver badges29 bronze badges

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

6 Comments

ixcode Over a year ago

That's exactly what I was hoping for. But can you please provide a short edit to my script to make it work that way?

LuisAFK Over a year ago

Done, I added the code snippet. And no jQuery required.

ixcode Over a year ago

Thank you for putting this all up. However, is it possible to keep using the script I'm using? Since in my tool, I have hundreds of buttons that are specified by id. And it's more complicated to execute it if I use the script above. However, the function of your code is exactly what I've been looking for. I would just much prefer if it's almost identical to what I've been using?

LuisAFK Over a year ago

So you need the JS to fetch them by their ID, not their innerText...?

ixcode Over a year ago

That is right sir! I have at least 100 buttons. In the JS, I specified exactly which buttons should be disabled for each one of those buttons. That's why I prefer the true or false method and using ID instead of class or innerText, since each of these buttons have unique and random names.

|

Collectives™ on Stack Overflow

How to turn on/off a particular Javascript script via checkbox or toggle?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related