切换开关 - 当我启用另一个按钮时禁用一个按钮
Posted
技术标签:
【中文标题】切换开关 - 当我启用另一个按钮时禁用一个按钮【英文标题】：Toggle switch - Disable one button when i enable the other one 【发布时间】：2019-05-03 11:45:54 【问题描述】：我想做的是禁用一个按钮，当我启用另一个按钮时（因此最多可以激活一个按钮），但我对 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。
【问题讨论】：
为什么要用两个开关？ 也许你需要分组radiobuttons？ 我使用开关切换不同的联系表格 【参考方案1】：<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<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" class="checkBox" onclick="ch($(this));">
<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" class="checkBox" onclick="ch($(this));">
<span class="slider round"></span>
</label>
</div>
<script>
function ch(thi)
$('.checkBox').prop('checked',false);
thi.prop('checked',true);
</script>
</body>
【讨论】：
【参考方案2】：// 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>如果有不清楚的地方 - 随时提问。
【讨论】：
谢谢！你治好了我的头痛 我喜欢你的回答，谢谢，但我认为如果页面有任何其他输入复选框，它将禁用！ @NarayanaReddyGurrala 这就是为什么您应该在查询中更具体：document.querySelectorAll('input[type=checkbox]') 请更新您的帖子并包含更多 html 结构。
@Smollet777 谢谢我明白了。【参考方案3】：
此脚本检查是否检查了任何其他开关（添加到 HTML 文件的末尾，就在 </body> 之前：
<script>
const switches = document.querySelectorAll("input[type=checkbox]");
for(const s of switches) s.addEventListener("change", check);
function check(e)
//count the number of checked switches:
let n = 0;
for(const s of switches)
if(s.checked) n++;
// if there is more than one checked (including the one you just clicked), uncheck it:
if(n > 1) e.target.checked = false;
</script>
这适用于任意数量的开关，只能切换一个。
【讨论】：
以上是关于切换开关 - 当我启用另一个按钮时禁用一个按钮的主要内容，如果未能解决你的问题，请参考以下文章