僅使用 javascript 設置一個復選框即可啟用所有其他復選框

Question

我真的很掙扎。 我想為此使用 Jquery，但不幸的是不允許這樣做。 因此，對於一個小練習，我需要讓一個復選框選中啟用所有其他復選框。 不，它不需要檢查它們，只需啟用它們。 這是我的 HTML 代碼：

 <table border="0"> <tr> <th id="thproductid"; colspan="2"; width="300px">Pizza</th> <th id="thproductid"; colspan="2"; width="150px"><input type="checkbox" name="pizzamedium" id="checkpizzamedium" onclick="Activeer(this)"> Medium</th> <th id="thproductid"; colspan="3"; width="50px">Aantal</th> <th width="100px"></th> <th id="thproductid"; colspan="2"; width="150px"><input type="checkbox" name="pizzalarge" id="checkpizzalarge" onclick="Activeer(this)"> Large</th> <th id="thproductid"; colspan="3"; width="50px">Aantal</th> <th width="100px"></th> </tr> <tr> <th id="tdid">1</th> <td id="tdproductid"> Margeritha</td> <td id="tdprijsid"> &#8364 7,50</td> <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Margeritham" value="Pizza Margeritha M" onclick="" disabled></td> <td><input type="button" id="plusknopmargerithaM" value=" + " onclick="" disabled></td> <td><input type="button" id="minknopmargerithaM" value=" - " onclick="" disabled></td> <td><input type="text" size="5" name="aantalpizzasmargerithaM" id="aantalpizzasmargerithaM" value="0" disabled></td> <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input disabled type="button" id="bestelknopmargarithaM" value="Toevoegen" onclick=""></td> <td id="tdprijsid"> &#8364 12,00</td> <td id="tdcheckboxid"><input disabled type="checkbox" name="pizzalarge" id="Margerithal" value="Pizza Margeritha L" onclick=""></td> <td><input disabled type="button" id="plusknopmargerithaL" value=" + " onclick=""></td> <td><input disabled type="button" id="minknopmargerithaL" value=" - " onclick=""></td> <td><input disabled type="text" size="5" name="aantalpizzasmargerithaL" id="aantalpizzasmargerithaL" value="0"></td> <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input disabled type="button" id="bestelknopmargarithaL" value="Toevoegen" onclick=""></td> </tr> <tr> <th id="tdid">2</th> <td id="tdproductid"> Bolognaise</td> <td id="tdprijsid"> &#8364 9,00</td> <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Bolognaisem" value="Pizza Bolognaise M" onclick="" disabled></td> <td><input disabled type="button" id="plusknopbolognaiseM" value=" + " onclick=""></td> <td><input disabled type="button" id="minknopbolognaiseM" value=" - " onclick=""></td> <td><input type="text" disabled size="5" name="aantalpizzasbolognaiseM" id="aantalpizzasbolognaiseM" value="0"></td> <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" disabled id="bestelknopbolognaiseM" value="Toevoegen" onclick=""></td> <td id="tdprijsid"> &#8364 13,50</td> <td id="tdcheckboxid"><input type="checkbox" name="pizzalarge" id="Bolognaisel" value="Pizza Bolognaise L" onclick="" disabled></td> <td><input type="button" id="plusknopbolognaiseL" value=" + " onclick="" disabled></td> <td><input type="button" id="minknopbolognaiseL" value=" - " onclick="" disabled></td> <td><input type="text" size="5" name="aantalpizzasbolognaiseL" id="aantalpizzasbolognaiseL" value="0" disabled></td> <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopbolognaiseL" value="Toevoegen" onclick="" disabled></td> </tr> <tr> <th id="tdid">3</th> <td id="tdproductid"> Calzone</td> <td id="tdprijsid"> &#8364 10,00</td> <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Calzonem" value="Pizza Calzone M" onclick="" disabled></td> <td><input type="button" id="plusknopcalzoneM" value=" + " onclick="" disabled></td> <td><input type="button" id="minknopcalzoneM" value=" - " onclick="" disabled></td> <td><input type="text" size="5" name="aantalpizzascalzoneM" id="aantalpizzascalzoneM" value="0" disabled></td> <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopcalzoneM" value="Toevoegen" onclick="" disabled></td> <td id="tdprijsid"> &#8364 16,50</td> <td id="tdcheckboxid"><input type="checkbox" name="pizzalarge" id="Calzonel" value="Pizza Calzone L" onclick="" disabled></td> <td><input type="button" id="plusknopcalzoneL" value=" + " onclick="" disabled></td> <td><input type="button" id="minknopcalzoneL" value=" - " onclick="" disabled></td> <td><input type="text" size="5" name="aantalpizzascalzoneL" id="aantalpizzascalzoneL" value="0" disabled></td> <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopcalzoneL" value="Toevoegen" onclick="" disabled></td> </tr> <tr> <th id="tdid">4</th> <td id="tdproductid"> Pollo</td> <td id="tdprijsid"> &#8364 10,00</td> <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Pollom" value="Pizza Pollo M" onclick="" disabled></td> <td><input type="button" id="plusknoppolloM" value=" + " onclick..

這是我的 JS 代碼：

 function Activeer(adres, checkbox1id, checkbox2id, checkbox3id, checkbox4id, checkbox5id, checkbox6id, checkbox7id, checkbox8id) { if(adres.checked) { document.getElementById(checkbox1id).disabled = ""; document.getElementById(checkbox2id).disabled = ""; document.getElementById(checkbox3id).disabled = ""; document.getElementById(checkbox4id).disabled = ""; document.getElementById(checkbox5id).disabled = ""; document.getElementById(checkbox6id).disabled = ""; document.getElementById(checkbox7id).disabled = ""; document.getElementById(checkbox8id).disabled = ""; } }

Answer 1

給你所有的復選框一個類， 然后分配每個復選框，但一個disabled屬性。 *

編輯

*無需對disabled屬性進行硬編碼，演示現在能夠以編程方式更改復選框的狀態。

我添加了一個 JavaScript 解決方案並注釋掉了 jQuery，如果您也想測試它，只需刪除注釋標記並將它們放在 JS 函數上。

var chxs = document.querySelectorAll('.chx');

var check = document.querySelector('input[type="checkbox"]');

check.addEventListener('change', function() {
  var chxArr = Array.prototype.map.call(chxs, function(obj, i) {

    if (obj.getAttribute('disabled')) {
      return obj.removeAttribute('disabled');
    } else {
      return obj.setAttribute('disabled', true);
    }
  });
}, false);

詳細信息在以下代碼段的來源中進行了評論：

片段

 /* $('.chx').on('change', function() { $('.chx').removeAttr('disabled'); }); */ // Collect all elements with class .chx into a NodeList var chxs = document.querySelectorAll('.chx'); // Reference the first checkbox found var check = document.querySelector('input[type="checkbox"]'); /* | - Add an eventListener to the first checkbox | - If a change event fires on the checkbox... */ check.addEventListener('change', function() { /* | - Convert the NodeList chxs into an array called chxArr with | map and call methods. | - On each iteration... */ var chxArr = Array.prototype.map.call(chxs, function(obj, i) { /* | - If the checkbox(obj) has the attribute "disabled"... | -...remove the "disabled" attribute... | - ...otherwise add the "disabled attribute to it. */ if (obj.getAttribute('disabled')) { return obj.removeAttribute('disabled'); } else { return obj.setAttribute('disabled', true); } // Lather, rinse, and repeat... }); }, false);

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>CHX</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div>ENABLE/DISABLE ALL <input type='checkbox'> </div> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> <input type='checkbox' class='chx'> <br/> </body> </html>

Answer 2

關於您的代碼的注意事項：

1. 在這種情況下，對流程進行硬編碼是您最不想做的事情。
2. 設置element.disabled = ""不會刪除該屬性，並且該元素將保持禁用狀態。

解決方案：

我不想對您已有的代碼進行太多更改，因此我繼續刪除了您通過使用for循環遍歷作為參數傳遞的元素（第一個[adres]除外）所做的硬編碼並一一禁用它們。

我還將element.disabled = ""更改為element.removeAttribute("disabl‌​ed") ，因為如上所述，前者實際上並未刪除該屬性。

function Activeer() {
  var
    adres = arguments[0], /* The first argument should be adres */
    args = [].slice.call(arguments, 1); /* Every element you want enabled */

  if (adres.checked) {
    for (var i = 0; i < args.length; i++) args[index].removeAttribute("disabl‌​ed");
  }
}

最后一點：

我相信這個解決方案會像你想要的那樣工作，但我仍然鼓勵你使用一個公共屬性（比如相同的class或name ） ，因為一切都會變得更加簡單，因為你必須為每個元素傳遞無數參數想要啟用。

例子：

假設你給他們一個類： class = "checkboxes" 。

function Activeer(adres) {
  var elements = document.querySelectorAll(".checkboxes");
  if (adres.checked) for (var i = 0; i < elements.length; i++) {
      args[index].removeAttribute("disabl‌​ed");
  }
}