Toggle Switch to disable and enable Links

Question

In the code below, I have coded a switch that disables and enables my links using CSS. The problem is that my switch is not changing its appearance. It's doing its job (the JavaScript functionality is working), but the appearance isn't. I don't have much experience with

HTML Button:

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

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

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 know there is something wrong with this because it is of the input type checkbox.

Thank you for any help you can provide.

Answer 1

For the record, please note that it is simpler in JS (es6). And because the subject only mentions javascript (not jQuery) on tag list.

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 2

Okay, ignoring the proposed code that is too vague, here's how a jQuery class toggle works:

$(".switch").on('click', function () {
  $(this)
    .toggleClass('disabled')
    .data('status', ($(this).hasClass("disabled")? '0':'1'));
    
  console.clear();
  console.log('data-status value is :', $(this).data('status') );
});

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div>

Answer 3

Using just CSS, incase you wanted to go that route. Figured it might be useful since you are saying the Javascript works but the appearance will not change.

Basic switch

/** Format Example Body **/

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

I think you just need to have a specific name of a class for an enabled link or disabled link

style

.link_enabled {
    /* style for enabled link */
}
.link_disabled {
    /* style for disabled link */
}

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