使用一个复选框纯粹使用javascript启用所有其他复选框

Question

我真的很挣扎。我想为此使用Jquery但不幸的是不允许它。 因此，为了进行一些练习，我需要让一个复选框启用所有其他复选框。不，它不需要检查它们，但只是启用它们。 这是我的HTML代码：

＆＃13;

＆＃13;

<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..

＆＃13;

＆＃13;

＆＃13;

这是我的JS代码：

＆＃13;

＆＃13;

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 = "";
    }
}

＆＃13;

＆＃13;

＆＃13;

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);

详细信息在以下代码段的来源中注释：

段

＆＃13;

＆＃13;

/*
$('.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);

＆＃13;

<!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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

关于您的代码的说明：

1. 在这种情况下，硬编码过程是您最不想做的事情。
2. 设置 element.disabled = "" 并不会删除该属性，但该元素仍将保持禁用状态。

<强>解决方案：

我不想更改您已有的代码，所以我继续使用 for 循环删除了您已完成的硬编码迭代你传递的元素作为参数（第一个 [adres] 除外），并逐个禁用它们。

我还将 element.disabled = "" 更改为 element.removeAttribute("disabl‌​ed") ，因为如上所述，前者并未真正删除该属性。< / p>

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");
  }
}