Tengo un código escrito en ColdFusion que produce una lista de entradas provenientes de una consulta SQL. El código es el siguiente:
<cfquery datasource="#request.dsn#" name="getProdInfo"> Select * from dbo.Lines,dbo.[Shift],dbo.operations where lineID=#form.SELLINE# and ShiftID=#form.SELSHIFT# </cfquery> <cfoutput query="getProdInfo"> <div class="control-group"> <label for="Ops">#OperationName# </label> <input class="input-xlarge focused" id="prods" name="prod" placeholder="Enter Production" type="number" validate="integer" /> <select name="Test" id="test"> <option>Option1</option> <option >Option2</option> </select> </div> <!--- Hidden Field---> <input class="input-small focused" id="trgt" name="Target" value="580"> </cfoutput>Este código produce 6 campos de entrada, 6 selecciones y 6 campos de destino ocultos (para bucles de salida de cf no CFers sobre el conjunto de resultados). Quiero realizar un jQuery que si el campo de entrada es inferior al 70% del objetivo, debe habilitar el menú desplegable Seleccionar; de lo contrario, manténgalo deshabilitado. Mi jQuery es el siguiente
<script type="application/javascript"> $('#prods').on('focusout', function(){ var element1 = document.getElementById("prods").value; var element2 = document.getElementById("trgt").value; var calc = (element1/element2)*100 if (calc<70){ $("#test").attr('disabled','disabled') } }); </script>El comportamiento es que cuando jQuery prueba el primer campo, deshabilita la primera selección pero no se aplica a las otras 5 selecciones. Creo que a mi jQuery le falta el ID del elemento seleccionado para la entrada.
Espero haber aclarado mi punto. Ayuda apreciada
Estoy más familiarizado con Vanilla JS, así que lo usaré.
Creo que esto es lo que podrías estar tratando de hacer. Dado que está recorriendo su consulta, debe agregar su detector de eventos a cada elemento de prod , no sé si es necesaria una identificación en este caso, pero siempre incluyo el nombre y la identificación como atributos estándar. La identificación debe ser única, por lo que agregué una identificación única de su consulta. También puede usar la columna de identificación de su consulta. Necesitará especialmente el nombre si desea enviarlo con un formulario. Puede o no ser único, dependiendo de cómo procese las entradas. La clase prod se usa para seleccionar todos los elementos similares y agregar el detector de eventos.
Como estoy revisando cada elemento de prod aquí para agregar el detector de eventos, podemos capturar ese evento e y usar el objetivo del evento, e.target para recuperar el valor.
También actualicé el atributo for en su etiqueta. No hay ningún elemento con una identificación de Ops y la identificación debe ser única de todos modos. La etiqueta no habría hecho nada antes.
document.querySelectorAll(".prod").forEach( function(p) { p.addEventListener( "focusout", function(e){ var element1 = e.target.value; var element2 = document.getElementById("trgt").value; var calc = (element1/element2)*100 if (calc<70){ document.getElementById("test").disabled = "disabled"; }//if }//function(e) )//addEventListener }//function(p) ); <cfoutput query="getProdInfo"> <div class="control-group"> <label for="prods#getProdInfo.currentRow#">#OperationName# </label> <input class="input-xlarge focused prod" id="prods#getProdInfo.currentRow#" name="prod#getProdInfo.currentRow#" placeholder="Enter Production" type="number" validate="integer" /> <select name="Test" id="test"> <option>Option1</option> <option >Option2</option> </select> </div> </cfoutput>Puede usar .prop para configurar disabled en verdadero o falso. Se agregó un enlace a la documentación.
$("#test").prop("disabled", true) -- disable $("#test").prop("disabled", false) -- enablehttps://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/
Mejor solo hazlo en Vanilla JS y deja de usar jQuery jajaja es 2021
element.disabled = true; element.disabled = false;