如果自定义开关已启用:
- 标签文字颜色应为绿色。
如果自定义开关被禁用:
- 标签文字颜色应为红色。
一个按钮可以启用自定义开关，另一个按钮可以通过JavaScript (JQuery)方法调用禁用它。
问题禁用标签的颜色似乎无法修改。虽然对于启用的标签也是如此。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style media="screen">
/* If it is enabled */
.exampleClass_label{
color: green;
font-weight: bold;
}
/* If it is disabled */
.myDiv2 .exampleClass_label{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<button onclick="myEnable()">Enable!</button>
<button onclick="myDisable()">Disable!</button>
<div class="custom-control custom-switch myDiv">
<input type="checkbox" class="custom-control-input"
id="exampleID_input_switch">
<label class="custom-control-label exampleClass_label"
for="exampleID_input_switch">
Title of Switch
</label>
</div>
<script type="text/javascript">
myDisable();
function myEnable() {
$(".myDiv").removeClass("myDiv2");
$('.myDiv :input').attr('disabled', false);
}
function myDisable(){
$(".myDiv").addClass("myDiv2");
$('.myDiv :input').attr('disabled', true);
}
</script>
</body>
</html>当您添加myDiv2类时，您可以将pointer-events: none设置为disabled。
.myDiv2{
pointer-events: none;
}
把上面的代码放到你的css中。