使用单选按钮禁用和启用复选框

Question

我在禁用和启用一些checkboxesvia单选按钮时遇到问题。基本上，我所尝试的是根据所选的单选按钮禁用一些复选框，如果没有选择单选按钮，则将其重新打开。

这是一个披萨订购程序。它有三种披萨选择，还有一些浇头。实际上，第一个和第二个单选按钮按预期工作。但当选择第三个单选按钮时，它会变得一团糟。第一个和第二个单选按钮不再工作。

有人能帮我解决这个问题吗？

这是我的JS语法

function pizzaChoice() {
var menu = document.querySelectorAll('input[name="pizza"]');
var dis = [];
if (menu[0].checked || menu[1].checked || menu[2].checked) {

if (menu[0].checked) {
var dis = ['Lobster', 'Oyster', 'Salmon', 'Bacon', 'Duck', 'Sausage'];
for (const val of dis) {
document.getElementById(val).disabled = true;
}
} else {
var dis = ['Lobster', 'Oyster', 'Salmon', 'Bacon', 'Duck', 'Sausage'];
for (const val of dis) {
document.getElementById(val).disabled = false;
}
}
if (menu[1].checked) {
var dis = ['Avocado', 'Tuna', 'Duck', 'Sausage']
for (const val of dis) {
document.getElementById(val).disabled = true;
}
} else {
var dis = ['Avocado', 'Tuna', 'Duck', 'Sausage']
for (const val of dis) {
document.getElementById(val).disabled = false;
}
}
if (menu[2].checked) {
var dis = ['Avocado', 'Lobster', 'Oyster', 'Salmon'];
for (const val of dis) {
document.getElementById(val).disabled = true;
}
} else {
var dis = ['Avocado', 'Lobster', 'Oyster', 'Salmon'];
for (const val of dis) {
document.getElementById(val).disabled = false;
}
}

}

}

Answer 1

好吧，据我所知，您认为您的代码因每个for循环上的重复而混乱吗？

我希望这能帮助你：

https://jsfiddle.net/J00nas/ozu1thjL/

我为浇头和每个选项之间的关系创建了一个表格。

var toppings = {
// 'Topping name': [is available on Option1, Option2, Option3]
'Avocado': [true, false, false],
'Tuna': [true, false, true],
'Duck': [false, false, true],
'Sausage': [false, false, true],
'Lobster': [false, true, false],
'Oyster': [false, true, false],
'Salmon': [false, true, false],
'Bacon': [false, true, true]
};

每种浇头都可以有更多的选择。

当您选择某个单选按钮时，将选项id作为参数传递，如pizzaChoice(0):

<input type="radio" name="pizza" onchange="pizzaChoice(0)">

并通过选择披萨选项禁用复选框

for (const name of Object.keys(toppings)) {
var chkbox = document.getElementById(name);
if (toppings[name][menuId]) { // available topping on this menu
chkbox.disabled = false;
}
else {
// disable if menu selected
chkbox.disabled = menu[menuId].checked;
if (menu[menuId].checked) {
chkbox.checked = false;
}
}
}

Answer 2

将所有复选框设置为默认禁用，并将pizzaChoice更改为下一个

<input type="checkbox" id="Lobster" name="Lobster" disabled>
... other checkboxes
function pizzaChoice() {
var menu = document.querySelectorAll('input[name="pizza"]');
var checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));
var dis = [];    
if (menu[0].checked) {
dis = ['Lobster', 'Oyster', 'Salmon', 'Bacon', 'Duck', 'Sausage'];
} else if(menu[1].checked) {
dis = ['Avocado', 'Tuna', 'Duck', 'Sausage'];
} else if(menu[2].checked) {
dis = ['Avocado', 'Lobster', 'Oyster', 'Salmon'];
}
checkboxes.map(function(el){
el.disabled = dis.indexOf(el.id) != -1;
});
}

Answer 3

我刚刚修改了if-else条件，以便它执行所选单选按钮的逻辑，而不是其他按钮的逻辑。你写if-else语句的方式有问题。

function pizzaChoice() {
var menu = document.querySelectorAll('input[name="pizza"]');
var dis = [];
let defualt = ['Lobster', 'Oyster', 'Salmon', 'Bacon', 'Duck', 'Sausage', 'Avocado', 'Tuna'];
for (let val of defualt) {
document.getElementById(val).disabled = false;
}
if (menu[0].checked || menu[1].checked || menu[2].checked) {
if (menu[0].checked) {
let dis = ['Lobster', 'Oyster', 'Salmon', 'Bacon', 'Duck', 'Sausage'];
for (let val of dis) {
document.getElementById(val).disabled = true;
}
}
if (menu[1].checked) {
let dis = ['Avocado', 'Tuna', 'Duck', 'Sausage']
for (let val of dis) {
document.getElementById(val).disabled = true;
}
}
if (menu[2].checked) {
let dis = ['Avocado', 'Lobster', 'Oyster', 'Salmon'];
for (let val of dis) {
document.getElementById(val).disabled = true;
}
}
}
}

<form>
<input type="radio" id="option1" name="pizza" value="option1" onclick="pizzaChoice()">
<label for="male">option1</label><br>
<input type="radio" id="option2" name="pizza" value="option2" onclick="pizzaChoice()">
<label for="female">option2</label><br>
<input type="radio" id="option3" name="pizza" value="option3" onclick="pizzaChoice()">
<label for="other">option3</label>
</form>
<input type="checkbox" id="Lobster" name="Lobster" value="1">
<label for="Lobster"> Lobster</label><br>
<input type="checkbox" id="Oyster" name="Oyster" value="2">
<label for="pizza2"> Oyster</label><br>
<input type="checkbox" id="Salmon" name="Salmon" value="3">
<label for="Salmon"> Salmon</label><br>
<input type="checkbox" id="Bacon" name="Bacon" value="4">
<label for="Bacon"> Bacon</label><br>
<input type="checkbox" id="Duck" name="Duck" value="5">
<label for="Duck"> Duck</label><br>
<input type="checkbox" id="Avocado" name="Avocado" value="6">
<label for="Avocado"> Avocado</label><br>
<input type="checkbox" id="Sausage" name="Sausage" value="7">
<label for="Sausage"> Sausage</label><br>
<input type="checkbox" id="Tuna" name="Tuna" value="8">
<label for="Tuna"> Tuna</label><br>