Switch the toggle to activate or deactivate links

Question

Switch the toggle to activate or deactivate links

My attempt at coding a switch to disable and enable links using CSS is functional in terms of JavaScript, but the appearance is not changing. I am lacking experience in this area.

Here is my HTML Button code:

<label class="switch" isValue="0">
    <div class="slider round">
    </div>
</label>

Concerning the CSS:

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
    background-color: #2196F3;
}

input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
   box-shadow: 0 0 1px #2196F3;
}

input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
    transform: translateX(26px);
}

 Rounded sliders 
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.dim.disabled {
    pointer-events: none;
    background-color: grey;
}

And for the JavaScript:

$(document).on('click', '.switch', function () {
    var v = $(".switch").attr("isValue");
    if (v == 1) {
        $(".switch").attr("isValue", "0");
        $(".dim").removeClass("disabled");
    }
    else {
        $(".switch").attr("isValue", "1");
        $(".dim").addClass("disabled");
    }
});

I suspect there is an issue with the use of checkboxes in this setup.

Your assistance on this matter would be greatly appreciated. Thank you.

javascript html css

Answer 1

Answer №1

Disregarding the unclear code suggestion, here is a breakdown of how a jQuery class toggle functions:

$(".toggle-button").on('click', function () {
  $(this)
    .toggleClass('inactive')
    .data('state', ($(this).hasClass("disabled")? 'off':'on'));
    
  console.clear();
  console.log('Current state: ', $(this).data('status') );
});

.switch > button {
  display: block;
  width: 68px;
  height: 68px;
  background-color: green;
  border-radius: 34px;
}

.switch.disabled > button {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-button" data-state="on"><button></button></div>

Answer 2

Disregarding the unclear code suggestion, here is a breakdown of how a jQuery class toggle functions:

$(".toggle-button").on('click', function () {
  $(this)
    .toggleClass('inactive')
    .data('state', ($(this).hasClass("disabled")? 'off':'on'));
    
  console.clear();
  console.log('Current state: ', $(this).data('status') );
});

.switch > button {
  display: block;
  width: 68px;
  height: 68px;
  background-color: green;
  border-radius: 34px;
}

.switch.disabled > button {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-button" data-state="on"><button></button></div>

Answer 3

Answer №2

By utilizing only CSS, in case you prefer that approach. I thought it might be helpful since you mentioned that the JavaScript is functioning but the visual aspect is not changing.

Simple toggle

/** Example Body Styling **/

body {
  margin: 0;
  padding: 0;
  background: #f0f0f0;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
}

.components {
  padding: 20px;
}

.components .content {
  margin-bottom: 20px;
}

.default {
  margin: 0 5px;
}

.switch {
  display: inline-block;
}

.switch input {
  display: none;
}

.switch small {
  display: inline-block;
  width: 100px;
  height: 18px;
  background: #3a3a3a;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.switch small:after {
  content: "No";
  position: absolute;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  text-align: right;
  padding: 0 6px;
  box-sizing: border-box;
  line-height: 18px;
}

.switch small:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: .3s;
  box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}

.switch input:checked~small {
  background: #3fc55c;
  transition: .3s;
}

.switch input:checked~small:before {
  transform: translate(25px, 0px);
  transition: .3s;
}

.switch input:checked~small:after {
  content: "Yes";
  text-align: left;
}

<div class="container">
  <div class="components">
    <div class="content">
      <label class="switch default">
                <input type="checkbox">
                <small></small>
            </label>
    </div>
  </div>
</div>

Answer 4

By utilizing only CSS, in case you prefer that approach. I thought it might be helpful since you mentioned that the JavaScript is functioning but the visual aspect is not changing.

Simple toggle

/** Example Body Styling **/

body {
  margin: 0;
  padding: 0;
  background: #f0f0f0;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
}

.components {
  padding: 20px;
}

.components .content {
  margin-bottom: 20px;
}

.default {
  margin: 0 5px;
}

.switch {
  display: inline-block;
}

.switch input {
  display: none;
}

.switch small {
  display: inline-block;
  width: 100px;
  height: 18px;
  background: #3a3a3a;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.switch small:after {
  content: "No";
  position: absolute;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  text-align: right;
  padding: 0 6px;
  box-sizing: border-box;
  line-height: 18px;
}

.switch small:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: .3s;
  box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}

.switch input:checked~small {
  background: #3fc55c;
  transition: .3s;
}

.switch input:checked~small:before {
  transform: translate(25px, 0px);
  transition: .3s;
}

.switch input:checked~small:after {
  content: "Yes";
  text-align: left;
}

<div class="container">
  <div class="components">
    <div class="content">
      <label class="switch default">
                <input type="checkbox">
                <small></small>
            </label>
    </div>
  </div>
</div>

Answer 5

Answer №3

One way to ensure you have distinct styles for enabled and disabled links is by assigning specific class names to them.

For styling:

.link_enabled {
    /* Styles for when the link is enabled */
}
.link_disabled {
    /* Styles for when the link is disabled */
}

As for the script:

$(document).on('click', '.switch', function () {
    var v = $(".switch").attr("isValue");
    if (v == 1) {
        $(".switch").attr("isValue", "0");
        $(".switch").removeClass("link_enabled").addClass("link_disabled");
        $(".dim").removeClass("disabled");
    }
    else {
        $(".switch").attr("isValue", "1");
        $(".switch").removeClass("link_disabled").addClass("link_enabled");
        $(".dim").addClass("disabled ");
    }
});

Answer 6

One way to ensure you have distinct styles for enabled and disabled links is by assigning specific class names to them.

For styling:

.link_enabled {
    /* Styles for when the link is enabled */
}
.link_disabled {
    /* Styles for when the link is disabled */
}

As for the script:

$(document).on('click', '.switch', function () {
    var v = $(".switch").attr("isValue");
    if (v == 1) {
        $(".switch").attr("isValue", "0");
        $(".switch").removeClass("link_enabled").addClass("link_disabled");
        $(".dim").removeClass("disabled");
    }
    else {
        $(".switch").attr("isValue", "1");
        $(".switch").removeClass("link_disabled").addClass("link_enabled");
        $(".dim").addClass("disabled ");
    }
});

Answer 7

Answer №4

Just a quick note, the code provided is written in a simpler way using ES6 in JavaScript. It's worth mentioning that only JavaScript is used here and not jQuery.

document.querySelector('.switch').onclick = function(e) {
  this.dataset.status = this.classList.toggle('disabled')?'0':'1';

  console.clear();
  console.log('data-status value is :', this.dataset.status );
}

.switch>span {
  display: block;
  width: 68px;
  height: 68px;
  background-color: green;
  border-radius: 34px;
}

.switch.disabled>span {
  background-color: grey;
}

<div class="switch" data-status="1" ><span></span></div>

Answer 8

Just a quick note, the code provided is written in a simpler way using ES6 in JavaScript. It's worth mentioning that only JavaScript is used here and not jQuery.

document.querySelector('.switch').onclick = function(e) {
  this.dataset.status = this.classList.toggle('disabled')?'0':'1';

  console.clear();
  console.log('data-status value is :', this.dataset.status );
}

.switch>span {
  display: block;
  width: 68px;
  height: 68px;
  background-color: green;
  border-radius: 34px;
}

.switch.disabled>span {
  background-color: grey;
}

<div class="switch" data-status="1" ><span></span></div>

Switch the toggle to activate or deactivate links

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide on retrieving the response headers with jQuery and AJAX

What steps can be taken in Javascript to handle a response status code of 500?

Discovering WebElements nested within other WebElements using WebdriverJS

Hoping for a swift ajax response from the identical function

Ensuring equal spacing between elements that are defined as a percentage, utilizing padding and margin properties

Visualize data from ajax call in tabular format

Issue with Ajax/Json: "An object of type triggers a circular reference error when attempting to retrieve a list."

Guide on accessing CGI Script response using AJAX

When <tr> is used as a link with the target="_blank" attribute

Transform the data format received from the AJAX request - modify the input value

What's the best method for concealing components: using a class to hide or removing them from the

Tips for troubleshooting JavaScript errors in Internet Explorer 7 & 6 using Dreamweaver CS3

"ExceptionThrownByMoveTargetOutOfBounds in Selenium WebDriver for IE9 and Firefox

Looking for assistance in identifying the cause of CSS malfunction in Internet Explorer

Failed commitments in JavaScript without a catch block (unhandled rejection)

Can you update the `runtime` property to `segment` in the export config?

How to Make a Div Tag Fade Effect with JavaScript in an External File

How do you update the bind value in VueJs when using :value="text"?

The personalized confirmation dialog is experiencing malfunctions

Tips for organizing a search using two keys in Javascript