javascript - 切换开关 - 当我启用另一个按钮时禁用一个按钮
问题描述
我想做的是禁用一个按钮,当我启用另一个按钮时(因此最多可以激活一个按钮),但我对 JS 的了解非常基础。任何提示将不胜感激。
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<div style="text-align: center; display: inline-block;">
<label class="switch">
<strong style=" position: absolute; color:white; margin-top: -30px; margin-left: -10px; text-align: center; font-weight: 100"> Text</strong>
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div style="display: inline-block;">
<div style="text-align: center;">
<label class="switch">
<strong style=" position: absolute; color:white; margin-top: -30px; margin-left: -10px; text-align: center; font-weight: 100"> Text</strong>
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit。前庭中间车辆 tristique。前庭等 sem。Ut venenatis sagittis gravida。Nam enim tortor,lacinia pretium dolor sit amet,rutrum ultricies ligula。Nunc lacinia metus 在 sagittis accumsan。Fusce eu urna mi。Sed mollis、erat eget blandit fringilla、nisi justo congue leo、eu fringilla orci tellus non diam。Curabitur id interdum nisi。Sed vulputate consectetur odio et laoreet。前庭 nec lorem massa。Morbi massa tortor,maximus vel purus ac,aliquet vulputate tellus。
解决方案
// get all inputs and hang event handlers
document.querySelectorAll('input[type=checkbox]').forEach(element => element.addEventListener('click', disableOther))
function disableOther(event) {
//"event" is current event(click)
//"event.target" is our clicked element
if (event.target.checked) {
// if current input is checked -> disable ALL inputs
document.querySelectorAll('input[type=checkbox]').forEach(element => element.disabled = true)
// enabling our current input
event.target.disabled = false;
} else {
// if current input is NOT checked -> enabling ALL inputs
document.querySelectorAll('input[type=checkbox]').forEach(element => element.disabled = false)
}
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<div style="text-align: center; display: inline-block;">
<label class="switch">
<strong style=" position: absolute; color:white; margin-top: -30px; margin-left: -10px; text-align: center; font-weight: 100"> Text</strong>
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div style="display: inline-block;">
<div style="text-align: center;">
<label class="switch">
<strong style=" position: absolute; color:white; margin-top: -30px; margin-left: -10px; text-align: center; font-weight: 100"> Text</strong>
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
如果有什么不清楚 - 随时问。
推荐阅读
- java - 如何从 sql 查询构建嵌套对象
- python - Python 列表索引必须是整数或切片,而不是 str 在制作列表时
- angular - 如何正确测试角度服务流
- c# - 为什么元数据文件中存在某些类型?
- vim - 我在哪里可以重置 VIM 中 cErrInParen 和 cErrInBracket 的突出显示?
- c# - 如何修复 Encoding.ASCII.GetBytes 的意外输出
- qt - 如何根据 QComboBox 值修改窗口内容
- pandas - 根据现有列的条件创建新列的最简洁方法是什么?
- python - 如何用 Python 在 Windows 上导出证书
- css - 如何通过更改 D3 图表中的 svg 过滤器元素对 svg 圆应用框阴影效果