Блог

У меня возникла проблема с отключением и включением некоторых флажков с помощью radiobutton. По сути, я пытался отключить какой-либо флажок на основе выбранного переключателя и снова включить его, если переключатель не выбран.

Это программа для заказа пиццы. В нем есть 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;
        }
    }
    
}
  

}

ну, как я понимаю, вы считаете, что ваш код запутан из-за дубликатов в каждом цикле for?

Я надеюсь, что это может вам помочь:

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

Я создаю таблицу для связи между topping и каждым параметром.

   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]
  };
  

Может быть больше опций, которые вы хотите для каждой начинки.

когда вы выбираете какую-либо переключающую кнопку, передавайте идентификатор опции в качестве параметра следующим образом 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;
      }
    }
  }
  

Установите все ваши флажки по умолчанию отключенными и измените pizzaChoice на next

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

Я просто изменил ваши условия 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>