问题：

切换开关-启用另一个按钮时禁用一个按钮

姜育

2023-03-14

我想做的是禁用一个按钮，当我启用另一个按钮时（因此最多可以激活一个按钮），但我对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，concetetur adipiscing elit。车辆三体间前庭。前庭等扫描电镜。Ut venenatis sagittis孕妇。Nam enim tortor，lacinia pretium dolor sit amet，rutrum ultricies ligula。蓄积矢状肌中的拉西尼亚美图。Fusce eu urna mi公司。塞德·莫利斯（Sed mollis）、埃拉特·埃吉特·布兰迪（erat eget blandit fringilla）、尼西·朱斯托·康格·利奥（nisi justo congue leo）、欧盟fringilla orci tellus non diam。Curabitur id interdum nisi。塞德咒骂奥迪奥和劳里特。前庭nec lorem massa。Morbi massa tortor，maximus vel purus ac，aliquet vulputate tellus。

共有3个答案

公西凯捷

2023-03-14

此脚本检查是否选中了任何其他开关（添加到HTML文件的末尾，就在<代码>

<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>

这适用于任意数量的交换机，只能切换一个。

东弘扬

2023-03-14

<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>

彭浩穰

2023-03-14

// 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>

类似资料：

单击一个切换按钮后，禁用回收器视图中的所有其他切换按钮

我正在使用RecycerView构建一个切换按钮列表（如numpad)，我希望实现：当用户通过单击某个按钮“打开”该按钮时，将“关闭”所有其他按钮我尝试在视图holder类中添加，并调用，这样就可以调用，然后更改按钮的状态。维埃霍尔德我的adpater类中的onBindViewHolder（）
用一个按钮切换多个div的显示和隐藏

我正在尝试通过一个按钮切换多个div与相同的类。目前，只有第一个div在执行任务，其余的都被忽略了。我尝试将.getElementById更改为.getElementsByClassName，但它也没有起到这个作用。你能帮忙吗？这是我的代码。我从两天起就开始尝试了。：/ 按钮代码： null null 单击“隐藏”/“显示”按钮时更改按钮文本的代码（德文）： null null 问题也许就在这里。
如何在禁用的字段集中启用一个按钮

问题内容：我想禁用Fieldset内的所有元素，但要启用其中的几个按钮。演示：问题答案：试试这个： HTML：脚本：
在React中禁用开关按钮

如果我单击年度单选按钮，则开关按钮（标记为“半天”）应隐藏或禁用（仅适用于年度单选按钮）。我该怎么做呢？这是我的开关按钮代码：这是我的onChange函数：我的单选按钮和开关按钮：
使用一个jPanel上的按钮修改另一个jPanel

我刚刚接触Java，正在为我的大学班级做一个项目。我正在开发一款百万富翁游戏，但是我被卡住了。我有一个JFrame类，其中我有2个面板。第一个由按钮组成，第二个是我想通过按下按钮来更改的面板。按钮具有自己的类及其构造函数，面板也是如此，因为它们具有不同的布局。我需要在按钮类中创建一个方法，以从框架中删除第二个面板并添加第三个面板（在另一个更JPanel类中描述）。因此，从技术上讲，我需要从按钮类
用selenium python按一个按钮[复制]

我想让机器人点击男性，但我不知道我是如何尝试使用它的，但它不适合我我想要一个命令，使机器人在Python中单击男性。

切换开关-启用另一个按钮时禁用一个按钮

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档