我正在制作一個禁用/啟用按鈕來禁用一系列按鈕，因此當按下“禁用”按鈕時它們不起作用。我這樣做是為了在按下禁用按鈕后它會更改其值以啟用我想使用相同的按鈕來啟用以前禁用的按鈕。
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>uj5u.com熱心網友回復：
希望這可以幫助。我曾經removeAttribute禁用按鈕。
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 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>uj5u.com熱心網友回復：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510249.html