Actualmente, cuando no he verificado ninguna radio, el botón estará deshabilitado. Cuando controlo una de las radios principales (p. ej., Parent 1 ), el botón aún está deshabilitado, pero cuando controlo una de las radios secundarias de la radio principal, se eliminará el atributo deshabilitado.
Pero cuando trato de verificar Parent 2 , el botón aún está activo y no está deshabilitado.
Lo que quiero es que cuando se marque la radio principal, el botón se desactivará. Sin embargo, al seleccionar la radio secundaria en la radio principal marcada, se eliminará el atributo de desactivación
$('.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>Puede hacer lo siguiente fragmento:
$('.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>Parece que desea habilitar el botón Enviar solo cuando se marcan uno de los botones de radio principal y uno de sus hijos.
$('.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> $(".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>