[英]make one checkbox enable all others purely with javascript
I'm really struggling with this.我真的很挣扎。 I want to use Jquery for this but it's not allowed unfortunately.
我想为此使用 Jquery,但不幸的是不允许这样做。 So for a little exercise I need to let one checkbox check enable all other checkboxes.
因此,对于一个小练习,我需要让一个复选框选中启用所有其他复选框。 No it doesn't need to check them but just enable them.
不,它不需要检查它们,只需启用它们。 Here is my HTML code:
这是我的 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"> € 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"> € 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"> € 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"> € 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"> € 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"> € 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"> € 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..
Here is my JS code:这是我的 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 = ""; } }
Give all of your checkboxes the same class,给你所有的复选框一个类,
then assign every checkbox but one the * disabled
attribute.然后分配每个复选框,但一个
disabled
属性。*
*No need to hardcode the disabled
attribute, the demo has the capability to programmatically change the state of the checkboxes now. *无需对
disabled
属性进行硬编码,演示现在能够以编程方式更改复选框的状态。
I added a JavaScript solution and commented out the jQuery, if you'd like to test it out as well, just remove the comment marks and place them on the JS function.我添加了一个 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);
Details are commented in the source of the following Snippet:详细信息在以下代码段的来源中进行了评论:
/* $('.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>
Notes about your code:关于您的代码的注意事项:
element.disabled = ""
doesn't remove the attribute and the element will stay disabled nonetheless.element.disabled = ""
不会删除该属性,并且该元素将保持禁用状态。 Solution:解决方案:
I didn't want to change too much the code you already have, so I went ahead and removed the hardcoding you've done by using a for
loop to iterate through the elements you pass as arguments (except the first one [adres]
) and disabling them one-by-one.我不想对您已有的代码进行太多更改,因此我继续删除了您通过使用
for
循环遍历作为参数传递的元素(第一个[adres]
除外)所做的硬编码并一一禁用它们。
I also changed element.disabled = ""
to element.removeAttribute("disabled")
, because as mentioned above, the former doesn't actually remove the attribute.我还将
element.disabled = ""
更改为element.removeAttribute("disabled")
,因为如上所述,前者实际上并未删除该属性。
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("disabled");
}
}
One last note:最后一点:
I believe this solution will work as you want, but I'd still encourage you to use a common attribute though (like the same class
or name
) , as everything will be significantly simpler since you want have to pass countless arguments for each element you want enabled.我相信这个解决方案会像你想要的那样工作,但我仍然鼓励你使用一个公共属性(比如相同的
class
或name
) ,因为一切都会变得更加简单,因为你必须为每个元素传递无数参数想要启用。
Example:例子:
Let's suppose you give them a class: class = "checkboxes"
.假设你给他们一个类:
class = "checkboxes"
。
function Activeer(adres) {
var elements = document.querySelectorAll(".checkboxes");
if (adres.checked) for (var i = 0; i < elements.length; i++) {
args[index].removeAttribute("disabled");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.