Disabled button condition based on radio button using jQuery-CodePudding

Currently when I have not checked any radio, the button will be disabled. When I check one of the parent radio (eg Parent 1), the button is still disabled, but when I check one of the children of the parent radio, the disabled attribute will be removed.

But when I try to check Parent 2, the button is still active and not disabled.

What I want is when the parent radio is checked, the button will be disabled. However, when selecting the child radio in the checked parent radio, the disable attribute will be removed

$('.checkbox-child').on('click', function(){
   $('.submit-button').removeAttr('disabled')
});

.submit-button{
  background-color:red;
  border:none;
  padding:10px 20px;
  color:white;
}

.submit-button:disabled{
  background-color: grey !important;
}

.checkbox-child-wrapper{
  margin-left:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="checkbox-container">
  <div class="item-container" id="parent-1">
    <input type="radio" name="check-parent" class="checkbox-parent"> Parent 1
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox-child"> Child 1
      <input type="radio" name="check-child" class="checkbox-child"> Child 2
      <input type="radio" name="check-child" class="checkbox-child"> Child 3
    </div>
  </div>
  <div class="item-container" id="parent-2">
    <input type="radio" name="check-parent" class="checkbox-parent"> Parent 2
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox-child"> Child 1
      <input type="radio" name="check-child" class="checkbox-child"> Child 2
      <input type="radio" name="check-child" class="checkbox-child"> Child 3
    </div>
  </div>
</div>
<button class="submit-button" disabled>Submit</button>

CodePudding user response：

You can do as below snippet:

$('.checkbox').on('click', function(){
  debugger;
  if ($(this).hasClass('parent')) {
    $('.submit-button').prop('disabled', true);
    $('.child').attr('checked', false);
  } else {
    $('.submit-button').removeAttr('disabled');
  }
});

.submit-button{
  background-color:red;
  border:none;
  padding:10px 20px;
  color:white;
}

.submit-button:disabled{
  background-color: grey !important;
}

.checkbox-child-wrapper{
  margin-left:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="checkbox-container">
  <div class="item-container" id="parent-1">
    <input type="radio" name="check-parent" class="checkbox parent"> Parent 1
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox child"> Child 1
      <input type="radio" name="check-child" class="checkbox child"> Child 2
      <input type="radio" name="check-child" class="checkbox child"> Child 3
    </div>
  </div>
  <div class="item-container" id="parent-2">
    <input type="radio" name="check-parent" class="checkbox parent"> Parent 2
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox child"> Child 1
      <input type="radio" name="check-child" class="checkbox child"> Child 2
      <input type="radio" name="check-child" class="checkbox child"> Child 3
    </div>
  </div>
</div>
<button class="submit-button" disabled>Submit</button>

CodePudding user response：

It sounds like you want to enable the Submit button only when a parent and one of its child radio buttons are checked.

$('.checkbox-parent').on('click', function() {
    // If at least one checked child, enable submit, else disable submit:
    if ( $(this).next().find('input:checked').length ) {
       $('.submit-button').removeAttr('disabled')
   } else {
       $('.submit-button').attr('disabled', true)
   }
});

$('.checkbox-child').on('click', function(){
    // If parent is checked, enable submit, else disable submit:
    if ( $(this).parent().previous().attr('checked') ) {
        $('.submit-button').removeAttr('disabled')
    } else {
        $('.submit-button').attr('disabled', true)
    }
});

.submit-button{
  background-color:red;
  border:none;
  padding:10px 20px;
  color:white;
}

.submit-button:disabled{
  background-color: grey !important;
}

.checkbox-child-wrapper{
  margin-left:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="checkbox-container">
  <div class="item-container" id="parent-1">
    <input type="radio" name="check-parent" class="checkbox-parent"> Parent 1
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox-child"> Child 1
      <input type="radio" name="check-child" class="checkbox-child"> Child 2
      <input type="radio" name="check-child" class="checkbox-child"> Child 3
    </div>
  </div>
  <div class="item-container" id="parent-2">
    <input type="radio" name="check-parent" class="checkbox-parent"> Parent 2
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox-child"> Child 1
      <input type="radio" name="check-child" class="checkbox-child"> Child 2
      <input type="radio" name="check-child" class="checkbox-child"> Child 3
    </div>
  </div>
</div>
<button class="submit-button" disabled>Submit</button>

CodePudding user response：

$(".item-container").click(function(event) {
    const parentcheckbox = $(this).children()[0]; // checkbox-parent
    const checkboxWrapper = $(this).children()[1]; // checkbox-child-wrapper
    const childCheckBoxes = $(checkboxWrapper).children(); // all checkbox-child
  
    if($(parentcheckbox).is(':checked')){ // iterate only if parent is checked
        let isChildChecked = false;
        childCheckBoxes.each(function( index ) {
            // console.log($(childCheckBoxes[index] ).is(':checked'));
            if($(childCheckBoxes[index] ).is(':checked')){ // if any child is checked then enable button
                isChildChecked = true;
                return false; // break out of loop
            }
        });
    
        isChildChecked ? $("#submit-button").removeAttr("disabled") : $(".submit-button").attr("disabled", true);
    
    }else{
        $(".submit-button").attr("disabled", true); // if parent is unchecked disable button
    }
});

.submit-button{
  background-color:red;
  border:none;
  padding:10px 20px;
  color:white;
}

.submit-button:disabled{
  background-color: grey !important;
}

.checkbox-child-wrapper{
  margin-left:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-container">
  <div class="item-container" >
    <input type="radio" name="check-parent" class="checkbox-parent"> Parent 1
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox-child"> Child 1
      <input type="radio" name="check-child" class="checkbox-child"> Child 2
      <input type="radio" name="check-child" class="checkbox-child"> Child 3
    </div>
  </div>
  <div class="item-container" >
    <input type="radio" name="check-parent" class="checkbox-parent"> Parent 2
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox-child"> Child 1
      <input type="radio" name="check-child" class="checkbox-child"> Child 2
      <input type="radio" name="check-child" class="checkbox-child"> Child 3
    </div>
  </div>
  <div class="item-container" >
    <input type="radio" name="check-parent" class="checkbox-parent"> Parent 3
    <div class="checkbox-child-wrapper">
      <input type="radio" name="check-child" class="checkbox-child"> Child 1
      <input type="radio" name="check-child" class="checkbox-child"> Child 2
      <input type="radio" name="check-child" class="checkbox-child"> Child 3
    </div>
  </div>
</div>
<button class="submit-button" id="submit-button" disabled>Submit</button>