¿La función jQuery no está habilitando mi botón de envío deshabilitado?
$(document).ready(function() { if ($("#lawfulBasis").prop("checked")) { $("#submitBtn").prop('disabled', false); alert('Button Clicked'); }; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> </head> <body> <input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone* <p> <input id="submitBtn" type="submit" value="Submit" disabled/> </p> </body> </html>El problema es que solo lee el estado del control de radio en el controlador document.ready, es decir. cuando la página se carga no cuando el usuario cambia su estado.
Para solucionar esto, adjunte un controlador de eventos de change a la radio y configure el estado disabled del botón en función de eso.
Finalmente, tenga en cuenta que debe usar una casilla de verificación para esto, no una radio. La razón es que la radio no se puede deseleccionar una vez seleccionada por primera vez.
jQuery($ => { $("#lawfulBasis").on('change', e => { $("#submitBtn").prop('disabled', !e.target.checked); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label> <input id="lawfulBasis" type="checkbox" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone* </label> <p> <input id="submitBtn" type="submit" value="Submit" disabled/> </p>Pensé en escribir esto en jQuery, pero en realidad es tan fácil de usar como Vanilla js. Su problema fue que está revisando todo esto cuando se carga el documento, y no cuando se presiona el botón.
document.getElementById("lawfulBasis").addEventListener("change", () => { const radio = document.getElementById("lawfulBasis"); if (radio.checked) { document.getElementById("submitBtn").disabled = false; } }); <input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone* <p> <input id="submitBtn" type="submit" value="Submit" disabled/> </p>Necesita una lista de eventos: $('#lawfulBasis').change()
$(document).ready(function() { $('#lawfulBasis').change(function() { if ($(this).prop("checked")) { $("#submitBtn").prop('disabled', false); alert('Button Clicked'); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> </head> <body> <input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone* <p> <input id="submitBtn" type="submit" value="Submit" disabled/> </p> </body> </html>