• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

168
Views
Condición de botón deshabilitado basada en botón de radio usando jQuery

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>

almost 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report

0

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>

almost 3 years ago · Juan Pablo Isaza Report

0

 $(".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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error