Estoy tratando de deshabilitar el elemento del botón según el valor de selección de un menú desplegable y cuando el área de texto no está vacía. Entonces, cuando el usuario selecciona Rechazar de la lista desplegable, también debe completar la entrada del área de texto; de lo contrario, no puede actualizar (el botón está desactivado, no oculto).
Sin embargo, no puedo lograrlo por completo, solo tengo éxito solo para la condición desplegable (también en estado oculto, no deshabilitado). Esto es lo que tengo:
(También sería bueno si alguien pudiera codificar esto con javascript puro, no con jquery, gracias)
$(document).ready(function(){ $(".input-wrap > select").on("change", function() { if ( this.value == "Reject") { $("button").hide(); } else { $("button").show(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-wrap"> <select class="select-class" id="selectId"> <option value="Reject">Reject</option> <option value="Earn">Earn</option> </select> </div> <div class="input-wrap"> <textarea class="textarea-class"></textarea> </div> <button type="button" class="button-class">Update</button>puede deshabilitar el botón usando
$("button").prop('disabled', true);y también marque el campo de texto vacío o no usando
if($("#textid").val().trim()!="") <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $(".input-wrap > select").on("change", function () { if (this.value == "Reject") { $("button").prop('disabled', true); } else { $("button").show(); $("button").prop('disabled', false); } }); $("#textid").on('keyup', function () { if ($("#textid").val().trim() != "") { $("button").prop('disabled', false); } else { $("button").prop('disabled', true); } }); }); </script> </head> <body> <div class="input-wrap"> <select class="select-class" id="selectId"> <option value="Reject">Reject</option> <option value="Earn">Earn</option> </select> </div> <div class="input-wrap"> <textarea class="textarea-class" id="textid"></textarea> </div> <button type="button" class="button-class">Update</button> </body> </html>Puedes usar el operador and (&&)
if(this.value == "reject" && ... your other condition) { // both conditions are met }else { // one or more condition is not met }