作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想做的是在启用另一个按钮时禁用一个按钮(这样最多可以激活一个按钮),但我对 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. Vestibulum interdum vehicula tristique。前庭等。 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>
如果有什么不清楚 - 请随时提问。
关于javascript - 拨动开关 - 当我启用另一个按钮时禁用一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53572460/
我是一名优秀的程序员,十分优秀!