Javascript 多按钮选择方案

如果选择了特定的按钮，我有多个场景。如何通过再次单击按钮重新选择

情景 （1） 仅培训 （2） 仅在NCR外旅行 （3） 仅限外出旅行 （4） 培训+出差NCR （5） 培训+外出旅行

这是到目前为止我的代码

<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType()" id="training" 
 name="training" value="training">
    <i class="fas fa-book fa-2x"></i>
    <p>Training or Seminar</p>
</button>
<button class="btn  btn-block btn-lg py-3" type="button" onclick="selectReimbursementType()" 
 id="outsideNcr" name="outsideNcr" value="outsideNcr">
   <i class="fas fa-bus-alt fa-2x"></i>
   <p>Travel outside NCR</p>
</button>
<button class="btn btn-block btn-lg py-3" type="button" onclick="selectReimbursementType()" id="outsidePh" 
 name="outsidePh" value="outsidePh">
   <i class="fas fa-plane-departure fa-2x"></i><br>
   <p>Travel outside PH</p>
</button>

<script>
  
  function selectReimbursementType(x) {
    var element = document.getElementById(x);
    var currentValue = document.getElementById(x).value;

    if(currentValue == 'training') {
      element.classList.add('is-active');
    } else if(currentValue == 'outsideNcr') {
      element.classList.add('is-active');
      document.getElementById('outsidePh').setAttribute('disabled', true);
    } else if(currentValue == 'outsidePh') {
      element.classList.add('is-active');
      document.getElementById('outsideNcr').setAttribute('disabled', true);
    }
  }
</script>

培训或研讨会

在NCR之外旅行



外出旅游

功能选择报销类型（x）{
var元素=document.getElementById（x）；
var currentValue=document.getElementById（x）.value；
如果（当前值==‘培训’）{
element.classList.add（'is-active'）；
}否则如果（currentValue=='outsideNcr'）{
element.classList.add（'is-active'）；
document.getElementById（'outsidePh'）.setAttribute（'disabled'，true）；
}else if（currentValue=='outsidePh'）{
element.classList.add（'is-active'）；
document.getElementById（'outsideNcr'）.setAttribute（'disabled'，true）；
}
}

我使用了

toggle（）

和

toggleAttribute（）

方法

只需使用以下js代码：

function selectReimbursementType(x) {
  var element = document.getElementById(x);
  var currentValue = document.getElementById(x).value;
  var ncr = document.getElementById('outsidePh');
  var ph = document.getElementById('outsideNcr');

  if(currentValue == 'training') {
    element.classList.toggle('is-active');
  } else if(currentValue == 'outsideNcr') {
    element.classList.toggle('is-active');
    ncr.toggleAttribute('disabled');
    
  } else if(currentValue == 'outsidePh') {
    element.classList.toggle('is-active');   
    ph.toggleAttribute('disabled');
  }
}

使用

element.classList.toggle

切换类

元素的Rest禁用状态，并根据条件重新设置

在下面试试

功能选择报销类型（x）{
var元素=document.getElementById（x）；
var currentValue=document.getElementById（x）.value；
//切换元素是活动类。
element.classList.toggle（'is-active'）；
//重置禁用
document.getElementById（'outsideNcr'）。removeAttribute（'disabled'）；
document.getElementById（'outsidePh'）。removeAttribute（'disabled'）；
//设置禁用按钮
如果（currentValue=='outsideNcr'&&element.classList.contains（'is-active'））{
document.getElementById（'outsidePh'）.setAttribute（'disabled'，true）；
}
if（currentValue==“outsidePh”&&element.classList.contains（'is-active'））{
document.getElementById（'outsideNcr'）.setAttribute（'disabled'，true）；
}
}

html{
字体大小：14px；
字体系列：“Nunito”，无衬线；
}
.报销-按钮.预览-btn{
边缘顶部：20px；
边缘底部：5px；
左边距：自动；
右边距：自动；
颜色：#ffffff；
}
.页脚{
背景#7f7f7f；
填充：10px 0px；
}
.报销卡{
字体大小：12px；
页边距底部：0；
}
.报销卡.btn.is-active{
背景：#32c5ff；
颜色：#ffffff；
内容：“\f058”；
}
.报销卡.btn:悬停{
背景：#32c5ff；
颜色：#ffffff；
}
.报销卡.btn:禁用：悬停{
背景：无；
颜色：#000000；
}

培训或研讨会

在NCR之外旅行



外出旅游

处于活动状态

类具有CSS，当单击某个按钮时，该按钮将变为

处于活动状态

类。因此，当重新单击按钮时，该按钮会两次获得相同的类。所以简单的方法是删除

处于活动状态的
类。正如你在下面建议的那样：

情景（1）仅培训（2）仅出差NCR（3）仅出差PH（4）培训+出差NCR（5）培训+出差PH

可以通过删除
禁用属性来重置这些场景


功能选择报销类型（x）{
var元素=document.getElementById（x）；
var currentValue=document.getElementById（x）.value；
函数选项（）{
element.classList.remove（'is-active'）
document.getElementById（'outsidePh'）。removeAttribute（'disabled'）；
document.getElementById（'outsideNcr'）。removeAttribute（'disabled'）；
}
if（element.classList.contains（'is-active'））{
取消设置选项（）；
}else if（currentValue=='training'）{
element.classList.add（'is-active'）；
}如果（currentValue='outsideNcr'）{
element.classList.add（'is-active'）；
document.getElementById（'outsidePh'）.setAttribute（'disabled'，true）；
}如果（currentValue='outsidePh'）{
element.classList.add（'is-active'）；
document.getElementById（'outsideNcr'）.setAttribute（'disabled'，true）
}
}
html{
字体大小：14px；
字体系列：“Nunito”，无衬线；
}
.报销-按钮.预览-btn{
边缘顶部：20px；
边缘底部：5px；
左边距：自动；
右边距：自动；
颜色：#ffffff；
}
.页脚{
背景#7f7f7f；
填充：10px 0px；
}
.报销卡{
字体大小：12px；
页边距底部：0；
}
.报销卡.btn.is-active{
背景：#32c5ff；
颜色：#ffffff；
内容：“\f058”；
}
.报销卡.btn:悬停{
背景：#32c5ff；
颜色：#ffffff；
}
.报销卡.btn:禁用：悬停{
背景：无；
颜色：#000000；
}

培训或研讨会

在NCR之外旅行



外出旅游

您需要此按钮行为吗？-@sergeykuznetsov有点像。如果取消选择了外部行程NCR，则应启用禁用按钮“吃！”！非常感谢。这回答了我的问题@艾莉丝，总是很乐意帮忙。谢谢你的回答。敬礼