How to toggle on/off a particular JavaScript script via onclick of a toggle?

Question

I am trying to use a new feature for my simple tool that will essentially add a "guided" way of using it.

How it works is: if a user clicks on a button, it will suggest (enable) and disable other buttons.

Now I've realized that some users won't like this restricted access to the tool, that's why I'd like to ask if it's possible to add a toggle in the settings to turn on/off this feature. I'd like it be turned on by default.

Simply put, the toggle should mean: If it's turned on, allow "guided" feature. If turned off, disable this feature and let the user click on any button they want.

Here's my sample:

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>

I'd like to apologize in advance if I don't have much code to show for. I'm new to coding and still learning... but I'd really want to have this feature if it's possible. Thanks in advance, I'd really appreciate any feedback/suggestion.

EDIT:

To hopefully explain my question further, here's a screenshot of the tool.

As you may see, there are several buttons that when clicked, will react by inserting a specific text into the textarea, and more importantly disable any buttons that won't fit in as the continuation of the clicked button.

Now I'm looking for a feature that will turn on/off this "guided" mode, possibly by using a checkbox, if ticked or not ticked, or a toggle, what's important is to turn of the script attached above.

This feature should turn on/off "guided mode" if the user prefers to not have it. Therefore, they should be able to click any buttons as they wish without the restrictions of a disabled button.

The script provided above is a simpler version, but it's exactly what I need and been using. I just want to be able to turn it on/off via toggle without coding.

So what exactly is your question? It looks like you have some relevant code that is more-or-less doing what you want. Though from the sound of it, you'll want to verify that `disable1st()` is only disabling `1st`, and not also `3rd` and `4th` like it's currently coded. You'll also need to create an event listener for your toggle to either call `resetall()` or `disable1st()`. — WOUNDEDStevenJones, Apr 07 '21 at 17:35
I apologize for that. My question is: how to make this blue toggle turn on/off the feature above it? So that the whole script won't work if it's turned off and vice versa? — ixcode, Apr 07 '21 at 17:37
https://stackoverflow.com/questions/14544104/checkbox-check-event-listener is what you're looking for. You can check the value in your event listener and then do whatever you want - e.g. `if (this.checked) { disable1st(); } else { resetall(); }`. — WOUNDEDStevenJones, Apr 07 '21 at 17:39
Let me try to explain it another way: right now, if user clicks ```1``` it will disable ```1```, ```3```, and ```4```. But what if a user doesn't want those buttons to be disabled after clicking ```1```? That's why I'd like to have a toggle that will turn this feature off. If that makes sense? — ixcode, Apr 07 '21 at 17:39
I'd also recommend removing `onclick="disable1st()"` from your HTML and instead bind it in JS like https://stackoverflow.com/a/6348597/1499877. This gives you the ability to add more functionality if you need it when the user clicks on a button. — WOUNDEDStevenJones, Apr 07 '21 at 17:42
Add a class to every button that should be disabled when using guidance, then when you click the guidance toggle button you can enable/disable all those buttons en-masse — freedomn-m, Apr 07 '21 at 17:50

Twisty · Accepted Answer · 2021-04-08T14:34:14.140

1

It's a little unclear what you are trying to accomplish. I put this example together that uses 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>

Update

I added a condition, such that if the Toggle is On, the click will trigger the disable. If the Toggle is Off, it will not trigger the disable.

edited Apr 08 '21 at 14:34

answered Apr 07 '21 at 19:16

Twisty

30,304
2
26
45

Hello there! Thank you for taking the time to put this all together. What I'm trying to accomplish is: the ```blue toggle``` is supposed to be a switch. A switch that will activate/inactivate the feature that ```disable``` the buttons onclick. So that if the ```blue toggle``` is turned off, the disable features onclick of buttons should not work, the user should be able to click any buttons without the disable feature. – ixcode Apr 07 '21 at 19:19
I'm sorry if I couldn't explain it in a better way. Right now, if a user clicks ```1``` it gets disabled or other buttons specified gets disabled. The purpose of the ```blue toggle``` should be to turn that feature off. No disabled buttons at all for any of them. If turned on, the feature will be back. – ixcode Apr 07 '21 at 19:22
@ixcode Ok, what should happen if the Toggle has turned features off and the User clicks a Button? – Twisty Apr 07 '21 at 20:01
@ixcode I updated the answer. I am still not sure if this is the State you want it to work in. – Twisty Apr 07 '21 at 20:10
You got it right sir! Each of these buttons have a unique purpose aside from the ```disable``` feature onclick. Not to confuse it: there are 2 types of ```disable``` feature here. #1, to make a particular button unclickable (as specified in the script) and the #2, to create a toggle that will turn off feature #1. So that I can still use the "original" purpose of these buttons, without feature #1. I know this is too much to ask, but can you please use the script I posted for feature #1 instead and make a toggle to turn it on/off? I'm more familiar with it for this scenario. Thanks a lot sir! – ixcode Apr 07 '21 at 23:38
I know you have already spent some of your time to write the code you've shared, so I really appreciate all of it! – ixcode Apr 07 '21 at 23:46
1

@ixcode this was simply a more complex condition. It was still very hard to tell from your description. You may want to make a State Diagram or Flow chart to help clarify your activity. – Twisty Apr 08 '21 at 14:35
I have edited my post now to add an image and some additional texts. If you're still interested in this problem, I would really appreciate it. – ixcode Apr 08 '21 at 16:41
1

@ixcode my most recent updates will work for you. Basically, in your click event, you will check to see if your Switch is on / off for Guided mode, and this will define the behavior for the click, guided or unguided activity. – Twisty Apr 09 '21 at 14:26
Now that's something I can work on to fit my tool. Thank you so much sir for your time, very much appreciated! – ixcode Apr 09 '21 at 16:57

How to toggle on/off a particular JavaScript script via onclick of a toggle?

1 Answers1