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

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 >
<div >
  <input type="button" value="disable" id="toggleButton">
</div>
  <div >
    <input type="button" value="button1" >
    <input type="button" value="button2" class ="buttons">
    <input type="button" value="button3" class= "buttons">
  </div>
  
</div>

CodePudding user response：

Hope this helps. I used removeAttribute do disable the buttons.

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

const OnOff = (e) => {
    let status = (e.target.value === "disable")
    buttons.forEach(button => {
        if (status){
           button.setAttribute('disabled', status);
        }else{
            button.removeAttribute('disabled')
        }
    });
    e.target.value = status ? 'enable': 'disable';
};

toggleButton.addEventListener('click',OnOff);

<div >
<div >
  <input type="button" value="disable" id="toggleButton">
</div>
  <div >
    <input type="button" value="button1" >
    <input type="button" value="button2" class ="buttons">
    <input type="button" value="button3" class= "buttons">
  </div>
  
</div>

CodePudding user response：

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 >
<div >
  <input type="button" value="disable" id="toggleButton">
</div>
  <div >
    <input type="button" value="button1" >
    <input type="button" value="button2" class ="buttons">
    <input type="button" value="button3" class= "buttons">
  </div>
  
</div>