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

Question

我在通过单选按钮禁用和启用某些复选框时遇到问题。 基本上，我尝试的是根据选定的单选按钮禁用某些复选框，如果未选择单选按钮，则将其重新打开。

这是一个披萨订购程序。 它有 3 种披萨可供选择，还有一些配料可供选择。 实际上，第一个和第二个单选按钮按预期工作。 但是当第三个单选按钮被选中时它变得混乱。 第一个和第二个单选按钮不再起作用。

任何人都可以帮我解决这个问题吗？

这是我的 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

将所有复选框设置为默认禁用并将比萨选择更改为下一个

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