Show checkboxes only if previous ones are checked

Question

I am trying to create a number of input checkboxes that are available only when others are first checked.

My problem: It's working for the first checkbox, when checked, it's displaying the second box but it won't do the same for the third when "#2" is selected.

this is the jQuery code:

jQuery('#1').change(function(){
  if(jQuery(this).prop("checked")) {
    jQuery('#2').show();
  } else {
    jQuery('#2').hide();
  }
});

jQuery('#robot').change(function(){
  if(jQuery(this).prop("checked")) {
    jQuery('#robot2').show();
  } else {
    jQuery('#robot2').hide();
  }
});

made a fiddle for the entire thing here: https://jsfiddle.net/srjjj/0Lpd6wzt/1/

Please put a [mcve] in your question (not jsfiddle). Your code here also differs from your code there. — j08691, Mar 13 '19 at 16:02
possible duplicate https://stackoverflow.com/questions/3582619/how-to-change-css-display-none-or-block-property-using-jquery — nidabdella, Mar 13 '19 at 16:02
@MohamedNidabdella No, this question is not a duplicate of that one — j08691, Mar 13 '19 at 16:05

score 1 · Accepted Answer · answered Mar 13 '19 at 16:01

Since your second and third inputs are in divs, unlike your first input, you have to use find() to select them:

if (jQuery(this).find('input').prop("checked")) {

You're using jQuery(this).prop("checked") where this refers to the div, not the input within it.

Show checkboxes only if previous ones are checked

1 Answers1