Disable and Enable checkbox with radio button

user_14291146 0
Viewed 179

I got problem with disable and enable some checkboxesvia radiobutton. Basically, what I was trying is disabling some checkbox based on selected radio button and turn it back on if the radio button not selected.

This is a pizza order program. It has 3 options of pizza with some options of topping. Actually, the first and second radio button works as expected. But it become messy when the third radio button selected. The first and the second radio button not working again.

Anyone can help me fix this ?

Here is the piece of my JS syntax

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

}

javascript
3 Answers

well, As I understand, you think your code is messy by duplicates on each for loops?

I hope this could help you:

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

I create a table for relation between topping and each options.

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

It can be have more options you want for each toppings.

when you choice some radio button, passed option id as parameter as like pizzaChoice(0):

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

and disable the checkboxes by selected pizza option

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

Set all your checkboxes default disabled and change pizzaChoice to 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;
    });
}
user_87182040

I just modified your if-else conditions so that it executes the logic for the radio button selected and not for others. there was an issue with the way you wrote if-else statement.

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>

user_82335480
Related