如何使用JavaScript启用禁用多个DOM元素

Question

I'm trying to enable many radio buttons using DOM manipulation to avoid click each time on all buttons to enable them.

I try this:

document.getElementById("on").disabled = true; 

and:

on-off-btn.off.active.setAttribute("enable", ""); 

Without success. I think I'm doing wrong? My HTML looks like this:

    <form>
    <div class="on-off-wrapper">
    <fieldset class="enabled">
    <div label="On" title="on" class="on-off-btn on active">
    <input type="radio" id="on" name="on_off" value="on"> 
    <span>On</span></div>
    <div label="Off" title="off" class="on-off-btn off">
    <input type="radio" id="off" name="on_off" value="on"> 
    <span>Off</span></div></fieldset></div>
    </form>

The code is always same about 60 time like this so this is why if I can enable all in one shot would be more simple. I try this using the google dev tool with the console...

Answer 1

If I understand your question correctly, multiple checkbox inputs in your HTML can be disabled and enabled via the following DOMElement methods;

// To set input disabled 
element.setAttribute("disabled", "disabled") 

// To set input enabled
element.removeAttribute("disabled") 

Combined with document.querySelectorAll() , you can achieve what you require as follows:

 function disableAll() { // Select all inputs with name attribute of value on_off and iterate // applying disabled attribute document.querySelectorAll('input[name="on_off"]').forEach(element => { element.setAttribute("disabled", "disabled"); }); } function enableAll() { // Select all inputs with name attribute of value on_off and iterate // removing disabled attribute (to enable) document.querySelectorAll('input[name="on_off"]').forEach(element => { element.removeAttribute("disabled"); }); } 

 <form> <div class="on-off-wrapper"> <fieldset class="enabled"> <div label="On" title="on" class="on-off-btn on active"> <input type="radio" id="on" name="on_off" value="on"> <span>On</span></div> <div label="Off" title="off" class="on-off-btn off"> <input type="radio" id="off" name="on_off" value="on"> <span>Off</span></div> </fieldset> </div> </form> <button onclick="enableAll()">Enable All</button> <button onclick="disableAll()">Disable All</button> 

Update

To achieve the updated toggle behavior mentioned in the comments below, see this:

 // Select all radio buttons document.querySelectorAll('input[type="radio"]').forEach(function(input) { // When any radio button is clicked input.addEventListener('click', function() { // 1. Reset all radio buttons to unchecked state document.querySelectorAll('input[type="radio"]') .forEach(function(reset) { reset.checked = false; }); // 2. Create a CSS selector to select all radio buttons that match the .on or .off // parent of the current radio button being clicked const selector = (input.parentElement.classList.contains('on') ? '.on' : '.off') + ' input[type="radio"]'; // 3. Select all radio buttons by selector (ie those that match this radio buttons // .on or .off parent), and set to checked document.querySelectorAll(selector).forEach(function(set) { set.checked = true; }); }) }); 

 <form> <div class="on-off-wrapper"> <fieldset class="enabled"> <div label="On" title="on" class="on-off-btn on active"> <input type="radio" id="on" name="on_off" value="on"> <span>On</span></div> <div label="Off" title="off" class="on-off-btn off"> <input type="radio" id="off" name="on_off" value="on"> <span>Off</span></div> </fieldset> </div> </form> <form> <div class="on-off-wrapper"> <fieldset class="enabled"> <div label="On" title="on" class="on-off-btn on active"> <input type="radio" id="on" name="on_off" value="on"> <span>On</span></div> <div label="Off" title="off" class="on-off-btn off"> <input type="radio" id="off" name="on_off" value="on"> <span>Off</span></div> </fieldset> </div> </form> <form> <div class="on-off-wrapper"> <fieldset class="enabled"> <div label="On" title="on" class="on-off-btn on active"> <input type="radio" id="on" name="on_off" value="on"> <span>On</span></div> <div label="Off" title="off" class="on-off-btn off"> <input type="radio" id="off" name="on_off" value="on"> <span>Off</span></div> </fieldset> </div> </form> <form> <div class="on-off-wrapper"> <fieldset class="enabled"> <div label="On" title="on" class="on-off-btn on active"> <input type="radio" id="on" name="on_off" value="on"> <span>On</span></div> <div label="Off" title="off" class="on-off-btn off"> <input type="radio" id="off" name="on_off" value="on"> <span>Off</span></div> </fieldset> </div> </form>