Disable and enable groups of buttons using an On/Off button

devuser 0
Viewed 31

I am making a disable/enable button to disable a series of buttons so they do not work when the "disable" button is pressed. I made it so that after the disable button is pressed it changes its value to enable I want to use the same button to enable the previously disabled-buttons.

const buttons = document.querySelectorAll('.buttons');
const toggleButton = document.getElementById('toggleButton');

const OnOff = (e) => {
    if(e.target.value=="disable"){
    buttons.forEach(button=>{
        button.setAttribute('disabled', true);
    });
        
  }e.target.value ="enable";
};

toggleButton.addEventListener('click',OnOff);
<div class="container">
<div class="row">
  <input type="button" value="disable" id="toggleButton">
</div>
  <div class="row">
    <input type="button" value="button1" class="buttons">
    <input type="button" value="button2" class ="buttons">
    <input type="button" value="button3" class= "buttons">
  </div>
  
</div>

dom javascript
2 Answers

const buttons = document.querySelectorAll('.buttons');
const toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener("click",()=>{
  buttons.forEach(btn=>{
   btn.disabled = !btn.disabled;
 })
 toggleButton.value = toggleButton.value === "disable" ? "enable" : "disable";
})
<div class="container">
<div class="row">
  <input type="button" value="disable" id="toggleButton">
</div>
  <div class="row">
    <input type="button" value="button1" class="buttons">
    <input type="button" value="button2" class ="buttons">
    <input type="button" value="button3" class= "buttons">
  </div>
  
</div>

KcH0
Related