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

Selenium Mouse/Pointer Display

What is the proper way to utilize useRef with HTMLInputElements?

Guide to retrieving SQL data using Node.js with mysql2

Overcoming Challenges with Ajax Success in Bootstrap DataTable Modal

Tips for concealing information within a JSON response using Javascript

Prevent Buttons from Being Clicked While Another is Active in Angular

Enhance your JavaScript skills by deserializing objects and seamlessly integrating new methods

Update the default arrow icon in the expand/collapse navigation bar

How can we rearrange the newly added row from onRowAdd in Material Table to be displayed at the beginning of the section?

Ensure that dynamically generated fields are verified whenever one of them is modified

How to retrieve JSON data from unidentified objects using JQuery

Changing font styles using the jMenu jQuery plugin: A step-by-step guide

The Route.get() function in Node.js is expecting a callback function, but instead received an unexpected object of type

Customize the border width and color of a specific column in HighCharts based on dynamic data

Display HTML in JavaScript without altering the Document Object Model

Navigating the intricacies of platform-specific settings in JavaScript

How do I prevent my image slider from scrolling to the top of the page when I click next or prev?

What is the best way to retrieve the value of a nested function in JavaScript?

Is it possible to extract elements from a single list and insert them onto various pages?

Struggling with getting React to successfully fetch data from an Express API. Any suggestions on how