javascript - 切换开关以禁用和启用链接

Question

在下面的代码中，我编写了一个使用 CSS 禁用和启用我的链接的开关。问题是我的开关没有改变它的外观。它正在完成它的工作(JavaScript 功能正在运行)，但外观却没有。我没有太多经验

HTML 按钮:

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

我知道这有问题，因为它是输入类型复选框。

感谢您提供的任何帮助。

Answer 1

好吧，忽略过于模糊的建议代码，这里是 jQuery 类切换的工作原理:

$(".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>